Responsive Standard

A twelve column fluid grid system.

<!-- A two column layout -->
<div class="row">
    <div class="column-6"> First column </div> 
    <div class="column-6"> Second column </div> 
</div>
12
11
1
10
2
9
3
8
4
7
5
6
6
5
7
4
8
3
9
2
10
1
11

Responsive: No Gutter

Add class .no-gutter to the row.

<!-- A two column layout -->
<div class="row no-gutter">
    <div class="column-6"> First column </div> 
    <div class="column-6"> Second column </div> 
</div>
12
11
1
10
2
9
3
8
4
7
5
6
6
5
7
4
8
3
9
2
10
1
11

Fixed Width

Add class .fixed to the container.

<!-- A two column layout -->
<div class="container fixed">
    <div class="row">
        <div class="column-6"> First column </div> 
        <div class="column-6"> Second column </div> 
    </div>
</div>
12
11
1
10
2
9
3
8
4
7
5
6
6
5
7
4
8
3
9
2
10
1
11

Persistent columns

Add class .fixed to the row.

<!-- A two column layout -->
<div class="row fixed">
    <div class="column-6"> First column </div> 
    <div class="column-6"> Second column </div> 
</div>
6
6
4
4
4

Nested columns

<!-- A two column layout -->
<div class="row">
    <div class="column-6"> First column 
        <div class="row">
            <div class="column-6"> First nested column </div> 
            <div class="column-6"> Second nested column </div> 
        </div>
    </div> 
    <div class="column-6"> Second column 
        <div class="row">
            <div class="column-6"> First nested column </div> 
            <div class="column-6"> Second nested column </div> 
        </div>
    </div> 
</div>
6
6
6
6
6
6

Persistent Nested columns

Add class .fixed to the row.

<!-- A two column layout -->
<div class="row fixed">
    <div class="column-6"> First column 
        <div class="row fixed">
            <div class="column-6"> First nested column </div> 
            <div class="column-6"> Second nested column </div> 
        </div>
    </div> 
    <div class="column-6"> Second column 
        <div class="row fixed">
            <div class="column-6"> First nested column </div> 
            <div class="column-6"> Second nested column </div> 
        </div>
    </div> 
</div>
6
4
4
4
6
4
4
4

Fixed Width : Nested columns

<!-- A two column layout -->
<div class="container fixed">
    <div class="row">
        <div class="column-6"> First column 
            <div class="row">
                <div class="column-6"> First nested column </div> 
                <div class="column-6"> Second nested column </div> 
            </div>
        </div> 
        <div class="column-6"> Second column 
            <div class="row">
                <div class="column-6"> First nested column </div> 
                <div class="column-6"> Second nested column </div> 
            </div>
        </div> 
    </div>
</div>
6
6
6
6
6
6

Offset Columns

Add class .push-[number] to the column.

<!-- A one column layout pushed -->
<div class="row">
    <div class="column-6 push-6"> First column </div> 
</div>
1
2
3
4
5
6
7
8
9
10
11

Offset Columns : No Gutter

Add class .no-gutter to the row.

Add class .push-[number] to the column.

<!-- A one column layout pushed -->
<div class="row no-gutter">
    <div class="column-6 push-6"> First column </div> 
</div>
1
2
3
4
5
6
7
8
9
10
11

Spaced Columns

Add class .no-gutter to the row.

Add class .push-[number] to the column.

<!-- A two column layout pushed -->
<div class="row no-gutter">
    <div class="column-3"> First column </div> 
    <div class="column-3 push-3"> Second column </div> 
</div>
3
3