Content must be in column, but form label isn't? - html

Question

In my form I've got fields with labels and fields without a label (i.e. a large textarea). I've given both my label and input fields a background color. Currently, the left margin of the labels differs from the left margin of the input fields.
The documentation says:
Content should be placed within columns, and only columns may be
immediate children of rows.
But the horizontal form example puts a <label> element inside a column:
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword3" placeholder="Password">
</div>
</div>
The <label> element is a column, but it is content itself as well:
An easy way to have the same left margin for labels and inputs is to put the label inside a column, instead of being a column as well. Is that the best solution, or is there another way to have both labels and inputs have the same left margin?

Answer 1

What the documentation says:
Content should be placed within columns, and only columns may be
immediate children of rows.
It has to be interpreted in context of row. It means you don't put content directly in a row but use columns to layout the content. This is because, bootstrap adds a standard 15px padding on columns (first and last offsetted) to do a clean layout.
Further down the documentation says this:
Columns create gutters (gaps between column content) via padding. That
padding is offset in rows for the first and last column via negative
margin on .rows
Note: Now this padding is important in your use-case.
It doesn't really matter if you style your labels with col-xx- classes or wrap them in a div and apply col-xx- class to the wrapping div. Net effect of layout remains same.
You have provided a background-color for your labels and which is exactly why you are seeing a difference. See, when there is a label with col-xx- style applied, it behaves like a bootstrap column i.e. it gets 15px padding. So the label-text starts at 15px padding even though the label itself starts at the edge. However, when you wrap your label in a div and apply col-xx- style to the wrapping div, then this div gets the padding and the label starts after this padding.
This difference is what is manifesting itself visibly in your design.
This snippet will make it clearer: (Notice the "Email" label which is a label with col-xx- i.e. label styled as bootstrap column. The "Password" label however is wrapped inside a div which as col-xx- style applied. Notice the difference due to padding.)
div.form-horizontal { border: 1px solid gray; }
textarea { width: 100%; }
label { background-color: silver; }
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<br/><br/>
<div class="row">
<div class="form-horizontal col-xs-offset-2 col-xs-8 ">
<div class="form-group">
<label class="col-xs-12">Definitie</label>
<div class="col-xs-12">
<textarea></textarea>
</div>
</div>
<div class="form-group">
<label for="inputEmail3" class="col-xs-2 control-label">Email</label>
<div class="col-xs-10">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email" />
</div>
</div>
<div class="form-group">
<div class="col-xs-2">
<label for="inputPassword3" class="control-label">Password</label>
</div>
<div class="col-xs-10">
<input type="password" class="form-control" id="inputPassword3" placeholder="Password" />
</div>
</div>
</div>
</div>
Here is a fiddle for you to play with: http://jsfiddle.net/abhitalks/gkkwevnz/
.