Bootstrap : horizontal fields inside vertical form

Question

I'd like to have some "horizontally styled" fields inside a "vertically styled" form with Bootstrap.

How can I do that (if possible)?

Answer 1

You can leverage Bootstrap's existing classes (checkbox.inline)to get the effect you're looking for. The key to making it look right is to specify padding-left: 0px; on the labels:

  <div class="control-group">
    <div class="controls">
      <label class="checkbox inline" style="padding-left: 0px;" for="inputColor">Favorite Color <input type="text" id="inputColor" class="span2" /></label>
      <label class="checkbox inline" style="padding-left: 0px;" for="inputNColor">Next Color <input type="text" id="inputNColor" class="span2" /></label>
    </div>
  </div>

Please see http://jsfiddle.net/jhfrench/Hzucn/ for a working example.

I tried to create a new class for you (along the lines of .controls-row label.inline { padding-left: 0px;} so you wouldn't have to do styling on the element, but it caused more conflicts than I anticipated. So if you're going to use this solution pervasively, you might want to invest the time in untangling that...