Boxed layout options
Boxed layout backgrounds
Color schemes

More color schemes will be available soon!

Grids The grid system help you organize content into rows and columns for desktop, mobile and tablet.

Basic grids

Below you can see a basic example for setting up different column layouts that will collapse based on viewport width.

Full width row:
.col-md-12
Two equal columns:
.col-md-6
.col-md-6
Three equal columns:
.col-md-4
.col-md-4
.col-md-4
Four equal columns:
.col-md-3
.col-md-3
.col-md-3
.col-md-3
Two columns I:
.col-md-4
.col-md-8
Two columns II:
.col-md-8
.col-md-4
Five columns:
.col-md-2
.col-md-2
.col-md-2
.col-md-2
.col-md-2
.col-md-2
Four columns I:
.col-md-2
.col-md-2
.col-md-2
.col-md-6
Four columns II:
.col-md-6
.col-md-2
.col-md-2
.col-md-2

Grid offsets

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

.col-md-4
.col-md-4 .col-md-offset-4
.col-md-3 .col-md-offset-3
.col-md-3 .col-md-offset-3
.col-md-6 .col-md-offset-3