How to vertically align label and input in Bootstrap 3

Question

How to vertically align label and input in Bootstrap 3   I would like both the label and input on same line   I have played around with different classes and custom CSS but nothing seems to work   The JSfiddle   lt div class  form-group  gt       lt div class  row  gt           lt div class  col-xs-3  gt               lt label for  class type  gt  lt h2 gt  lt span class   label label-primary  gt Class Type lt  span gt  lt  h2 gt  lt  label gt           lt  div gt           lt div class  col-xs-2  gt               lt select name  class type  id  class type  class    form-control input-lg  style  width 200px  autocomplete  off  gt                   lt option  gt Economy lt  option gt                   lt option  gt Premium Economy lt  option gt                   lt option  gt Club World lt  option gt                   lt option  gt First Class lt  option gt               lt  select gt           lt  div gt        lt  div gt   lt  div gt

User · Accepted Answer

The problem is that your  lt label gt  is inside of an  lt h2 gt  tag  and header tags have a margin set by the default stylesheet

User · Answer

This works perfectly for me in Bootstrap 4    lt div class  form-row align-items-center  gt      lt div class  col-md-2  gt        lt label for  FirstName  style  margin-bottom 0rem  important   gt First Name lt  label gt    lt  div gt    lt div class  col-md-10  gt       lt input type  text  id  FirstName  name  FirstName  class  form-control  val     gt     div gt   lt  div gt

User · Answer

None of these solutions worked for me  But I was able to get vertical centering by using  lt div class  form-row align-items-center  gt  for each form row  per the Bootstrap examples

User · Answer

The bootstrap 3 docs for horizontal forms let you use the  form-horizontal class to make your form labels and inputs vertically aligned  The structure for these forms is    lt form class  form-horizontal  role  form  gt     lt div class  form-group  gt       lt label for  input1  class  col-lg-2 control-label  gt Label1 lt  label gt       lt div class  col-lg-10  gt         lt input type  text  class  form-control  id  input1  placeholder  Input1  gt       lt  div gt     lt  div gt     lt div class  form-group  gt       lt label for  input2  class  col-lg-2 control-label  gt Label2 lt  label gt       lt div class  col-lg-10  gt         lt input type  password  class  form-control  id  input2  placeholder  Input2  gt       lt  div gt     lt  div gt   lt  form gt    Therefore  your form should look like this    lt form class  form-horizontal  role  form  gt       lt div class  form-group  gt           lt div class  col-xs-3  gt               lt label for  class type  gt  lt h2 gt  lt span class   label label-primary  gt Class Type lt  span gt  lt  h2 gt  lt  label gt           lt  div gt           lt div class  col-xs-2  gt               lt select id  class type  class  form-control input-lg  autocomplete  off  gt                   lt option gt Economy lt  option gt                   lt option gt Premium Economy lt  option gt                   lt option gt Club World lt  option gt                   lt option gt First Class lt  option gt               lt  select gt           lt  div gt       lt  div gt   lt  form gt

User · Answer

I m sure you ve found your answer by now  but for those who are still looking for an answer   When input-lg is used  margins mismatch unless you use form-group-lg in addition to form-group class  Its example is in docs    lt form class  form-horizontal  gt     lt div class  form-group form-group-lg  gt       lt label class  col-sm-2 control-label  for  formGroupInputLarge  gt Large label lt  label gt       lt div class  col-sm-10  gt         lt input class  form-control  type  text  id  formGroupInputLarge  placeholder  Large input  gt       lt  div gt     lt  div gt     lt div class  form-group form-group-sm  gt       lt label class  col-sm-2 control-label  for  formGroupInputSmall  gt Small label lt  label gt       lt div class  col-sm-10  gt         lt input class  form-control  type  text  id  formGroupInputSmall  placeholder  Small input  gt       lt  div gt     lt  div gt   lt  form gt

[css] How to vertically align label and input in Bootstrap 3?

Examples related to css

Examples related to html

Examples related to twitter-bootstrap-3