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 · 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:

<form class="form-horizontal" role="form">
  <div class="form-group">
    <label for="input1" class="col-lg-2 control-label">Label1</label>
    <div class="col-lg-10">
      <input type="text" class="form-control" id="input1" placeholder="Input1">
    </div>
  </div>
  <div class="form-group">
    <label for="input2" class="col-lg-2 control-label">Label2</label>
    <div class="col-lg-10">
      <input type="password" class="form-control" id="input2" placeholder="Input2">
    </div>
  </div>
</form>

Therefore, your form should look like this:

<form class="form-horizontal" role="form">
    <div class="form-group">
        <div class="col-xs-3">
            <label for="class_type"><h2><span class=" label label-primary">Class Type</span></h2></label>
        </div>
        <div class="col-xs-2">
            <select id="class_type" class="form-control input-lg" autocomplete="off">
                <option>Economy</option>
                <option>Premium Economy</option>
                <option>Club World</option>
                <option>First Class</option>
            </select>
        </div>
    </div>
</form>

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 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

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