Grid

You can also add an 12 column grid to create a site or page layout.

This grid is based on the Bootstrap grid system, so if you are already familiar with the Bootstrap grid classes (col-lg-6 col-md-4 col-sm-12) this should be simple to use.

In order to use this grid you must also include the grid CSS stylesheet.

1/1
1/2
1/2
1/3
1/3
1/3
1/4
1/4
1/4
1/4
1/2 1/3 1/6 1/6
1/2 1/3 1/6 1/6
1/2 1/3 1/6 1/6
1/2 1/3 1/6 1/6
1/2 1/3 1/6 1/6
1/2 1/3 1/6 1/6
1/2 1/3 1/6 1/12
1/2 1/3 1/6 1/12
1/2 1/3 1/6 1/12
1/2 1/3 1/6 1/12
1/2 1/3 1/6 1/12
1/2 1/3 1/6 1/12
1/2 1/3 1/6 1/12
1/2 1/3 1/6 1/12
1/2 1/3 1/6 1/12
1/2 1/3 1/6 1/12
1/2 1/3 1/6 1/12
1/2 1/3 1/6 1/12

Examples

Two-thirds
One-third
One-half
One-quarter
One-quarter
One-quarter
Three Quarters

Grid with Vertically Centered Contents

Add the .center-vertical class to the .row element to have the contents centered vertically. (This example is for desktop view only - content will stack on mobile devices)

placeholder image

Diam consequat condimentum

Mus ultrices primis dapibus erat natoque integer facilisis tellus feugiat netus varius praesent egestas nostra varius.

placeholder image

Placerat vel varius consectetuer venenatis

Facilisi a posuere Posuere, neque non orci cursus. Molestie convallis porta eget torquent venenatis porttitor sagittis.

Grid with Background Colors

Adding the .equal-height class to the .row element will make all of the child elements of each row the same height

Adipiscing nascetur feugiat platea est aenean enim pellentesque Placerat vel varius consectetuer venenatis tempus pretium. Ut tempor feugiat, iaculis ultricies urna. Venenatis viverra vulputate lobortis tristique primis. Faucibus. Vulputate est.

Mus ultrices primis dapibus erat natoque integer facilisis tellus feugiat netus varius praesent egestas nostra varius. Ut cubilia pharetra porta rutrum leo maecenas ullamcorper. Convallis litora, justo mattis. Diam consequat condimentum ipsum nullam elementum suscipit vel lectus tincidunt erat felis. Lacus euismod. Urna, sapien accumsan faucibus facilisi fames, viverra eu.

Facilisi a posuere Posuere, neque non orci cursus. Molestie convallis porta eget torquent venenatis porttitor sagittis, elit semper nullam consectetuer turpis porta ad lorem in tristique aenean quis. Adipiscing auctor.