Question

I’m trying to create a form with form elements side by side, and their labels (aligned with the beginning of the respective input element) on top of them, like so:

Label                 Label2
+----------------+    +-------+
+----------------+    +-------+

The following doesn’t work as expected, because “Label2” is slightly unaligned with the input element:

<div class="controls controls-row">
    <label class="span9"><span>Label</span></label>
    <label class="span2"><span>Label2</span></label>
</div>
<div class="controls controls-row">
    <input type="text" class="span9" />
    <input type="text" class="span2" />
</div>

I got it to work using this workaround-ish structure:

<div class="controls controls-row">
    <div class="span9">
        <label><span>Label</span></label>
    </div>
    <div class="span2">
        <label><span>Label2</span></label>
    </div>
</div>
<div class="controls controls-row">
    <div class="span9">
        <input type="text" class="span12" />
    </div>
    <div class="span2">
        <input type="text" class="span12" />
    </div>
</div>

So could this be a bug? Because on the Twitter Bootstrap page it says:

Use .span1 to .span12 for inputs that match the same sizes of the grid columns.

Here’s a JSFiddle that reproduces my problem.

Answer 1

Probably the easiest fix is to remove the whitespace in the HTML between the two inputs:

<input type="text" class="span9" />
<input type="text" class="span2" />

to:

<input type="text" class="span9" /><input type="text" class="span2" />