Horizontal Form

Right align labels and float them to the left to make them appear on the same line as controls. Requires the most markup changes from a default form:

  • Add .form-horizontal to the form
  • Wrap labels and controls in .form-group
  • Add .control-label to the label
  • Wrap any associated controls with the proper grid col-md-* for sizing
<form class="form-horizontal">
    <div class="form-group">
      <label class="control-label col-md-2" for="inputEmail">Email</label>
      <div class="col-sm-10">
        <input type="text" id="inputEmail" placeholder="Email" class="form-control">
      </div>
    </div>
    <div class="form-group">
      <label class="control-label col-md-2" for="inputPassword">Password</label>
      <div class="col-sm-10">
        <input type="password" id="inputPassword" placeholder="Password" class="form-control">
      </div>
    </div>
    <div class="form-group">
      <div class="col-sm-offset-2 col-sm-10">
        <div class="checkbox">
          <label>
            <input type="checkbox"> Remember me
          </label>
        </div>
      </div>
    </div>
    <div class="form-group">
      <div class="col-sm-offset-2 col-sm-10">
        <button type="submit" class="btn btn-default">Sign in</button>
      </div>
    </div>
  </form>