0

using bootstrap, what is the right way to create a group of radio buttons (underneath each other) and have other form elements next to only some of the radio buttons?

Pseudo Layout:

<Radiobutton1> <Text_Radiobutton1>   <inputform-Text> <some Text>
<Radiobutton2> <Text_Radiobutton2>  
<Radiobutton3> <Text_Radiobutton3>  
<Radiobutton4> <Text_Radiobutton4>   <checkbox1> <Text_Checkbox1>
<Radiobutton5> <Text_Radiobutton5>  

Thanks for any help,

Ben

1 Answer 1

2

Is this what you wanted?

The only thing you need to do is putting classes for the bootstrap but you can find that on w3schools or other websites.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<label >
  <input name="radio" type="radio" >
  <span ></span>
  <span >Toggle this custom radio</span>
  <input type="text">
</label>
<br/>
<label class="custom-control custom-radio">
  <input name="radio" type="radio">
  <span></span>
  <span>Or toggle this other custom radio</span>
  <input type="text">
  <input type="checkbox">
    <span >Toggle this checkbox</span>
</label>

8
  • From what the layout looks like, yes it is. Now, the two radiobuttons have to behave as one group, i.e. if i select either one, then the other one has to be unselected.
    – Ben
    Aug 26, 2016 at 11:05
  • Now you can choose one radio at a time, you can do this by giving the radio a name="blabla". They both need to have the same name to have it work. Aug 26, 2016 at 11:22
  • Thanks, looks great. So some follow up questions for my understanding: 1) How ist "custom-control" related to "form-group" and "form-inline" which are explained in the bootstrap docs?
    – Ben
    Aug 26, 2016 at 11:57
  • i forgot to take that out. Dont use that yet use form-group. Aug 26, 2016 at 11:59
  • Great, i will try this at home
    – Ben
    Aug 26, 2016 at 12:16

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.