Lining up labels with radio buttons in bootstrap

Question

I have a Bootstrap form with some inline radio buttons and a label  I d like to keep the label on the same line as the buttons  but I can t seem to make that happen  Here s my approach    lt form gt       lt div class  control-group  gt           lt label class  control-label  gt Some label lt  label gt           lt div class  controls  gt               lt label class  radio inline  gt                   lt input type  radio  value  1   gt                  First              lt  label gt               lt label class  radio inline  gt                   lt input type  radio  value  2   gt                  Second              lt  label gt           lt  div gt       lt  div gt   lt  form gt    Fiddle  http   jsfiddle net GaDbZ 2   I also tried this    lt form gt       lt div class  form-inline  gt           lt label class  control-label  gt Some label lt  label gt           lt label class  radio  gt               lt input type  radio  value  1   gt              First          lt  label gt           lt label class  radio  gt               lt input type  radio  value  2   gt              Second           lt  label gt       lt  div gt   lt  form gt    But everything is smooshed together  Fiddle  http   jsfiddle net GaDbZ 3   How can I get the horizontal spacing from the first one combined with the vertical spacing of the second   Also  I should note that in real life  I have a bunch of other stuff going on in the form  so I don t want to use form-horizontal because it creates funky margins that don t jive with the other stuff I have in there

User · Answer

In Bootstrap 4 you can use the form-check-inline class    lt div class  form-check form-check-inline  gt     lt input class  form-check-input  type  radio  name  queryFieldName  id  option1  value  1  gt     lt label class  form-check-label  for  option1  gt First lt  label gt   lt  div gt   lt div class  form-check form-check-inline  gt     lt input class  form-check-input  type  radio  name  queryFieldName  id  option2  value  2  gt     lt label class  form-check-label  for  option2  gt Second lt  label gt   lt  div gt

User · Answer

Key insights for me were   - ensure that label content comes after the input-radio field  - I tweaked my css to make everything a little closer   radio-inline  radio-inline       margin-left  5px

User · Answer

Best is to just Apply margin-top  2px on the input element     Bootstrap adds a margin-top  4px to input element causing radio button to move down than the content

User · Answer

Since Bootstrap 3 you have to use checkbox-inline and radio-inline classes on the label    This takes care of vertical alignment    lt label class  checkbox-inline  gt       lt input type  checkbox  id  inlineCheckbox1  value  option1  gt  1  lt  label gt   lt label class  radio-inline  gt       lt input type  radio  name  inlineRadioOptions  id  inlineRadio1  value  option1  gt  1  lt  label gt

User · Answer

This is all nicely lined up including the field label   Lining up the field label was the tricky part     HTML Code    lt div class  form-group  gt       lt label class  control-label col-md-5  gt Create a lt  label gt       lt div class  col-md-7  gt           lt label class  radio-inline control-label  gt               lt input checked  checked  id  TaskLog TaskTypeId  name  TaskLog TaskTypeId  type  radio  value  2  gt  Task          lt  label gt           lt label class  radio-inline control-label  gt               lt input id  TaskLog TaskTypeId  name  TaskLog TaskTypeId  type  radio  value  1  gt  Note          lt  label gt       lt  div gt   lt  div gt    CSHTML   Razor Code    lt div class  form-group  gt       Html Label  Create a   htmlAttributes  new    class    control-label col-md-5          lt div class  col-md-7  gt           lt label class  radio-inline control-label  gt               Html RadioButtonFor model   gt  model TaskTypeId  Model TaskTaskTypeId  Task          lt  label gt           lt label class  radio-inline control-label  gt               Html RadioButtonFor model   gt  model TaskTypeId  Model NoteTaskTypeId  Note          lt  label gt       lt  div gt   lt  div gt

User · Answer

If you add the  radio inline  class to the control label in the solution provided by user1938475 it should line up correctly with the other labels   Or if you re only using  radio  like your 2nd example just include the  radio  class    lt label class  radio control-label  gt Some label lt  label gt    OR for  radio inline    lt label class  radio-inline control-label  gt Some label lt  label gt

User · Answer

This may work for you  Please try this    lt form gt     lt div class  form-inline  gt       lt div class  controls-row  gt         lt label class  control-label  gt Some label lt  label gt         lt label class  radio inline  gt           lt input type  radio  value  1    gt First        lt  label gt         lt label class  radio inline  gt           lt input type  radio  value  2    gt Second        lt  label gt       lt  div gt     lt  div gt   lt  form gt

[css] Lining up labels with radio buttons in bootstrap

Examples related to css

Examples related to twitter-bootstrap