Columns

Basic grid structure used for column layout. These layouts are achieved working in HTML view.

Column layout options

Column structure is based on a 12-column grid and should add up to a total of 12.
Columns must be contained inside a row div class="row".
Columns are designed to collapse and stack when viewed on a phone. To retain the column structure on mobile devices, use 'col-xs' rather than 'col-md'.

Two Third Layout

div class="col-md-8"

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Qua tu etiam inprudens utebare non numquam. Eadem nunc mea adversum te oratio est. Quam ob rem tandem, inquit, non satisfacit? Dicam, inquam, et quidem discendi causa magis, quam quo te aut Epicurum reprehensum velim. Quare attende, quaeso.

One Third Column Layout

div class="col-md-4"

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Qua tu etiam inprudens utebare non numquam. Eadem nunc mea adversum te oratio est. Quam ob rem tandem, inquit, non satisfacit? Dicam, inquam, et quidem discendi causa magis, quam quo te aut Epicurum reprehensum velim. Quare attende, quaeso.

Two Column Layout

div class="col-md-6"

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Qua tu etiam inprudens utebare non numquam. Eadem nunc mea adversum te oratio est. Quam ob rem tandem, inquit, non satisfacit? Dicam, inquam, et quidem discendi causa magis, quam quo te aut Epicurum reprehensum velim. Quare attende, quaeso.

Two Column Layout

div class="col-md-6"

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Qua tu etiam inprudens utebare non numquam. Eadem nunc mea adversum te oratio est. Quam ob rem tandem, inquit, non satisfacit? Dicam, inquam, et quidem discendi causa magis, quam quo te aut Epicurum reprehensum velim. Quare attende, quaeso.

 

Three Column Layout

div class="col-md-4"

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Qua tu etiam inprudens utebare non numquam. Eadem nunc mea adversum te oratio est.

Three Column Layout

div class="col-md-4"

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Qua tu etiam inprudens utebare non numquam. Eadem nunc mea adversum te oratio est.

Three Column Layout

div class="col-md-4"

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Qua tu etiam inprudens utebare non numquam. Eadem nunc mea adversum te oratio est.

 

Medium column - resize browser to see difference

Four Column Layout

div class="col-md-3"

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Qua tu etiam inprudens utebare non numquam. Eadem nunc mea adversum te oratio est.

Four Column Layout

div class="col-md-3"

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Qua tu etiam inprudens utebare non numquam. Eadem nunc mea adversum te oratio est.

Four Column Layout

div class="col-md-3"

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Qua tu etiam inprudens utebare non numquam. Eadem nunc mea adversum te oratio est.

Four Column Layout

div class="col-md-3"
 

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Qua tu etiam inprudens utebare non numquam. Eadem nunc mea adversum te oratio est.

 

Extra small column - resize browser to see difference

Use col-xs (extra small) when you want the column to hold up on small device.

Four Column Layout

div class="col-xs-3"

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Qua tu etiam inprudens utebare non numquam. Eadem nunc mea adversum te oratio est. Quam ob rem tandem, inquit, non satisfacit.

Four Column Layout

div class="col-xs-3"

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Qua tu etiam inprudens utebare non numquam. Eadem nunc mea adversum te oratio est. Quam ob rem tandem, inquit, non satisfacit.

Four Column Layout

div class="col-xs-3"

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Qua tu etiam inprudens utebare non numquam. Eadem nunc mea adversum te oratio est. Quam ob rem tandem, inquit, non satisfacit.

Four Column Layout

div class="col-xs-3"

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Qua tu etiam inprudens utebare non numquam. Eadem nunc mea adversum te oratio est. Quam ob rem tandem, inquit, non satisfacit.

Two Column Layout on Mobile

div class="col-xs-6"

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Qua tu etiam inprudens utebare non numquam. Eadem nunc mea adversum te oratio est. Quam ob rem tandem, inquit, non satisfacit.

Two Column Layout on Mobile

div class="col-xs-6"

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Qua tu etiam inprudens utebare non numquam. Eadem nunc mea adversum te oratio est. Quam ob rem tandem, inquit, non satisfacit.

Flex Container

Start new row. Wrap section with div class="flex-wrap"

First Column

Wrap column with div class="flex-container"

Second Column

Wrap each column with div class="flex-container"

Third Column

Add as many columns as you'd like, but generally works best with 2-4.

Fourth Column

Columns will stack on a phone (resize browser to see).