Layout and grid
All columns must be contained in two divs with .row and .container classes respectively.
Rows will create an element that always extends to 100% of the browser window. That can be handy as demonstrated below.
This is a .row.
The container element will limit width to a maximum width of 1400px and center the layout on the page.
This is a .container.
<div class="row">
<div class="container">
<p>All columns must be contained in a <samp>.row</samp>.</p>
</div>
</div>
Column classes
Most pages will need elements laid out at half, one third or two thirds of the page. You can also create narrower, centered columns at half or two-thirds widths.
Two Columns at Equal Widths
<div class="half">50%</div>
<div class="half">50%</div>
Three Columns at Equal Widths
<div class="third">33%</div>
<div class="third">33%</div>
<div class="third">33%</div>
Two Thirds/One Third Columns
<div class="twothird">66%</div>
<div class="third">33%</div>
Important information about columns
Columns will not display correctly unless the last column is the last child element.
Works
<div class="parent">
<div class="half">child</div>
<div class="half">child</div><!-- last child -->
</div>
<div class="parent">
<div class="half">child</div>
<div class="half">child</div><!-- last child -->
</div>
Does not work
<div class="parent">
<div class="half">child</div>
<div class="half">child (this element will have an extra right margin so it wraps)</div>
<div class="half">child</div>
<div class="half">child</div>
</div>
Centered columns
To make a half-width or two-thirds width column that is centered, use the .feature class.
<div class="half feature">
<p>Half-width column that is centered</p>
</div>
Half-width column that is centered
<div class="twothirds feature">
<p>Two thirds-width column that is centered</p>
</div>
<!-- note: "twothirds" and "twothird" will both work. (I
kept forgetting which was correct.) -->
<div class="twothird feature">
<p>Two thirds-width column that is centered</p>
</div>
Two thirds-width column that is centered