Bootstrap : horizontal fields inside vertical form

css, twitter-bootstrap

Solution

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

Problem

I'd like to have some "horizontally styled" fields inside a "vertically styled" form with Bootstrap. How can I do that (if possible)?

Original source