Components

Bootstrap's default grid system

Bootstrap includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases.

Basic grid HTML

For a simple two column layout, create a .row and add the appropriate number of .span* columns. As this is a 12-column grid, each .span* spans a number of those 12 columns, and should always add up to 12 for each row (or the number of columns in the parent).

<div class="row-fluid">
<div class="span4">...</div>
<div class="span8">...</div>
</div>

Given this example, we have .span4 and .span8, making for 12 total columns and a complete row.

Colored columns

<div class="row-fluid">
<div class="span4"><h5>A single column</h5><p>lorem ipsum...</p></div>
<div class="span4">...</div>
<div class="span4">...</div>
<div class="span4">...</div>
</div>

<div class="row-fluid colored">
<div class="span4"><h5>A single colored column</h5><p>lorem ipsum...</p></div>
<div class="span4">...</div>
<div class="span4">...</div>
<div class="span4">...</div>
</div>