Color schemes

More color schemes will be available soon!

Layout options
Boxed layout backgrounds

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

Documentation

To see all the available options & configurations, we suggest reading the Bootstrap Grid System documentation.

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
Get source

                
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
Get source

                
.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