# Shortcodes: Bootstrap 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.

1
1
1
1
1
1
1
1
1
1
1
1
4
4
4
4
8
6
6
12

#### 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

Info:
You can add a `.colored` class to a row in your grid system to emphasize your columns with a color effect:

##### 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>