Radio buttons in bootstrap .form-horizontal

Question

I hit my head against a wall trying to get normal behavior from Bootstrap with radio buttons inside .form-horizontal .

The problem is that the switches and their labels are aligned as well as aligned with the rest of the form. Best of all I managed:

  <legend>New user</legend> <form accept-charset="UTF-8" action="#" class="form-horizontal" id="new_user" method="post"> <div class="control-group"> <label class="control-label" for="user_affiliation">Affiliation</label> <div class="controls"> <input id="user_affiliation" name="user[affiliation]" size="30" type="text" /> </div> </div> <div class="control-group"> <div clas="controls"> <div class="radio"> <label> <input id="user_role_managing_editor" name="user[role]" type="radio" value="Managing editor"> Managing editor </label> <label> <input id="user_role_area_editor" name="user[role]" type="radio" value="Area editor"> Area editor </label> <label> <input id="user_role_author_or_referee" name="user[role]" type="radio" value="Author or referee"> Author/referee </label> </div> </div> </div> <div style="text-align: center;"> <input class="btn btn-primary" name="commit" type="submit" value="Register" /> </div> </form> 

Which gets me this:

As you can see, the radio buttons do not work with the rest of the form. They should be placed vertically with the text box or do something more sensible than hugging the left, as if it were a .form-inline .

Any help would be greatly appreciated.

Answer 1

No hacking !, Using bootstrap2:

 <div class="control-group"> <label class="control-label"> User role</label> <div class="controls"> <label class="radio"> <input type="radio" name="user[role]" id="user_role_managing_editor" value="Managing editor" checked> Managing editor </label> <label class="radio"> <input type="radio" name="user[role]" id="user_role_area_editor" value="Area editor"> Area editor </label> <label class="radio"> <input type="radio" name="user[role]" id="user_role_author_or_referee" value="Author or referee"> Author/referee </label> </div> </div> 

Demo: http://jsfiddle.net/GX6q4/1/

Update: here is Bootstrap3 version:

 <legend>New user</legend> <form accept-charset="UTF-8" action="#" class="form-horizontal" id="new_user" method="post"> <div class="form-group"> <label class="col-xs-2 control-label" for="user_affiliation">Affiliation</label> <div class="col-xs-10"> <input class="form-control" id="user_affiliation" name="user[affiliation]" size="30" type="text" /> </div> </div> <div class="form-group"> <label class="col-xs-2 control-label">User role</label> <div class="col-xs-10"> <div class="radio"> <label> <input type="radio" name="user[role]" id="user_role_managing_editor" value="Managing editor" checked>Managing editor </label> </div> <div class="radio"> <label> <input type="radio" name="user[role]" id="user_role_area_editor" value="Area editor">Area editor </label> </div> <div class="radio"> <label> <input type="radio" name="user[role]" id="user_role_author_or_referee" value="Author or referee">Author/referee </label> </div> </div> </div> </form> 

Demo: http://jsfiddle.net/24sx72mn/1/

Boot version 4:

 <legend>New user</legend> <form accept-charset="UTF-8" action="#" id="new_user" method="post"> <div class="form-group row"> <label class="col-sm-2 col-form-label" for="user_affiliation">Affiliation</label> <div class="col-sm-10"> <input class="form-control" id="user_affiliation" name="user[affiliation]" type="text" /> </div> </div> <div class="form-group row"> <label class="col-sm-2 col-form-label">User role</label> <div class="col-sm-10"> <div class="form-check"> <input type="radio" class="form-check-input" name="user[role]" id="user_role_managing_editor" value="Managing editor" checked> <label class="form-check-label" for="user_role_managing_editor"> Managing editor </label> </div> <div class="form-check"> <input type="radio" class="form-check-input" name="user[role]" id="user_role_area_editor" value="Area editor"> <label class="form-check-label" for="user_role_area_editor"> Area editor </label> </div> <div class="form-check"> <input type="radio" class="form-check-input" name="user[role]" id="user_role_author_or_referee" value="Author or referee"> <label class="form-check-label" for="user_role_author_or_referee"> Author/referee </label> </div> </div> </div> </form> 

Demo: http://jsfiddle.net/p8wyd7s8/1/

Answer 2

There are no hacks, you just need to use the Bootstrap grid (col-xx-x classes), for example:

 <div class="form-group" > <label for="txt_web" class="col-lg-3 control-label">xxx</label> <div class="col-lg-9"> <input class="form-control input-sm" type="text" name="txt_web" id="txt_web" /> </div> </div> <div class="form-group" > <label for="txt_web" class="col-lg-3 control-label">xxx</label> <div class="col-lg-9"> <div class="radio">...</div> ... </div> </div> 

Answer 3

Add a style to your radio class,

 .radio { margin-left:180px; } 

Check out the demo here .