Label on the left side instead above an input field

Stefan Vogt picture Stefan Vogt · Aug 23, 2013 · Viewed 223k times · Source

I would like to have the labels not above the input field, but on the left side.

<form method="post" action="" role="form" class="form-inline">
  <div class="form-group">
    <label for="rg-from">Ab: </label>
    <input type="text" id="rg-from" name="rg-from" value="" class="form-control">
  </div>
  <div class="form-group">
    <label for="rg-to">Bis: </label>
    <input type="text" id="rg-to" name="rg-to" value="" class="form-control">
  </div>
  <div class="form-group">
    <input type="button" value="Clear" class="btn btn-default btn-clear"> 
    <input type="submit" value="Los!" class="btn btn-primary">
  </div>
</form>

This code gives me:

Code_Result_Bootstrap_3_Label

I would like to have:

Desired_Result_Bootstrap_3_Label

Answer

Martin Cisneros Capistr&#225;n picture Martin Cisneros Capistrán · Nov 28, 2015

You can use form-inline class for each form-group :)

<form>                      
    <div class="form-group form-inline">                            
        <label for="exampleInputEmail1">Email address</label>
            <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
    </div>
</form>