Grid System

Our grid system is based upon the Bootstrap grid system. It uses a 12 column layout

12 col
6 col
6 col
4 col
4 col
4 col
2 col
2 col
2 col
2 col
2 col
2 col

Responsive Grid

Column sizes can be made to act responsively using a set of reactive classes

There are four breakpoints defined; xs, sm, md and lg

Use the syntax col-[media query code]-* to define different column sizes for different viewports, for example:

3 col
3 col
3 col
3 col

Offsetting columns

Move columns to the right using .col-lg-offset-* classes. These classes increase the left margin of a column by * columns. For example, .col-lg-offset-4 moves .col-lg-4 over four columns.

.col-lg-4
.col-lg-4 .col-lg-offset-4
.col-lg-3 .col-lg-offset-3
.col-lg-3 .col-lg-offset-3
.col-lg-6 .col-lg-offset-3

Containers

There are two container types to choose from; .container and .container-fluid

.container
.container-fluid