Column Layout

Columns can be thought of as containers for content. On smaller screens the content is displayed vertically, making them responsive.

They are divided into twelfths across the screen, but be default will fit across the screen if no size is given.

e.g. to make three columns, each a third use the example below.

[columns]
[column]
Equal width 1
[/column]
[column]
Equal width 2
[/column]
[column]
Equal width 3
[/column]
[/columns]

Output



Equal width 1


Equal width 2


Equal width 3

For more granular control you can specify sizes (1-12) for each column – assuming they add up to 12.

[columns]
[column size=2]
Here is some text with a content width of 2/12
[/column]
[column size=10]
Here is some text with a width of 10/12
[/column]
[/columns]

Output



Here is some text with a content width of 2/12


Here is some text with a width of 10/12