Grid System
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
A single column
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
A single column
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
A single column
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
A single column
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
A single colored column
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
A single colored column
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
A single colored column
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
A single colored column
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
<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>