Syntax
This grid system uses a 12-column grid and is fully responsive. Columns are wrapped within a grid class.
<div class="grid">
<div class="column-xs-12 column-md-12">1</div>
</div>Grid
Use column-xs-*, column-sm-*, column-md-*, or column-lg-* classes with values 1 through 12 to indicate the number of columns. By default, all columns are the same height.
1
1
1
1
1
1
1
1
1
1
1
2
2
2
2
2
2
3
3
3
3
4
4
4
5
7
6
6
7
5
8
4
9
3
10
2
11
1
12
<div class="grid">
<div class="column-xs-12 column-md-1">1</div>
...
<div class="column-xs-12 column-md-12">12</div>
</div>Nesting
grid within a grid.
column-md-6
column-md-6
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab, natus!
column-md-4
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Modi fugiat molestias culpa minus?
<div class="grid">
<div class="column-xs-12 column-md-6">column-md-6
<div class="grid">
<div class="column-xs-12 column-md-4">column-md-4</div>
<div class="column-xs-12 column-md-4">column-md-4</div>
<div class="column-xs-12 column-md-4">column-md-4</div>
</div>
</div>
...
</div>Order
Reorder columns by adding first and last.
1
2
3
4
<div class="grid">
<div class="column-xs-12 column-md-3">1</div>
<div class="column-xs-12 column-md-3 first">2</div>
<div class="column-xs-12 column-md-3 last">3</div>
<div class="column-xs-12 column-md-3">4</div>
</div>Top Alignment
Vertically align columns at the top with align-top.
This column in the grid is aligned at the top.
2
3
4
<div class="grid align-top">
<div class="column-xs-12 column-md-3">This column in the grid is aligned at the top.</div>
<div class="column-xs-12 column-md-3">2</div>
<div class="column-xs-12 column-md-3">3</div>
<div class="column-xs-12 column-md-3">4</div>
</div>Center Alignment
Vertically align columns at the center with align-center.
1
This column in the grid is aligned at the center.
This column in the grid is aligned at the center.
4
<div class="grid align-center">
<div class="column-xs-12 column-md-3">1</div>
<div class="column-xs-12 column-md-3">This column in the grid is aligned at the center.</div>
<div class="column-xs-12 column-md-3">This column in the grid is aligned at the center.</div>
<div class="column-xs-12 column-md-3">4</div>
</div>Bottom Alignment
Vertically align columns at the bottom with align-bottom.
1
2
3
This column in the grid is aligned at the bottom.
<div class="grid align-bottom">
<div class="column-xs-12 column-md-3">1</div>
<div class="column-xs-12 column-md-3">2</div>
<div class="column-xs-12 column-md-3">3</div>
<div class="column-xs-12 column-md-3">This column in the grid is aligned at the bottom.</div>
</div>