Multi-Column Layouts

One-Column Layout

col-md-12

Two-Column Layout

See what point it breaks.

The two columns will run horizontally regardless of resoultion.

col-6
col-6

The two columns will stack until the break point is reached at 768px.

Fermentum posuere urna nec tincidunt praesent semper. Ut enim blandit volutpat maecenas volutpat blandit. Euismod lacinia at quis risus sed vulputate. Dolor sit amet consectetur adipiscing elit. Convallis posuere morbi leo urna molestie. Suspendisse ultrices gravida dictum fusce ut placerat orci. Velit ut tortor pretium viverra suspendisse. Nunc sed blandit libero volutpat sed.

Fermentum posuere urna nec tincidunt praesent semper. Ut enim blandit volutpat maecenas volutpat blandit. Euismod lacinia at quis risus sed vulputate. Dolor sit amet consectetur adipiscing elit. Convallis posuere morbi leo urna molestie. Suspendisse ultrices gravida dictum fusce ut placerat orci. Velit ut tortor pretium viverra suspendisse. Nunc sed blandit libero volutpat sed.


The two columns will stack until the break point is reached at 992px.

col-md-6
col-md-6

The two columns will stack until the break point is reached at 1200px.

col-lg-6
col-lg-6

Three-Column layout (for tablets)

col-sm-4
col-sm-4
col-sm-4

Three-Column layout (for laptops/desktops)

col-md-4
col-md-4
col-md-4

Four-Column layout

col-sm-3
col-sm-3
col-sm-3
col-sm-3

Layout with Unequal Columns

The two columns will stack until the break point is reached at 768px with a 75/25 split on tablets and up.

col-sm-8
col-sm-4