JOIN THE HANDMADE PARTY IN OTTAWA, JUNE 11-25 JUIN, VISITEZ LE PARTI ARTISAN!

Layouts

All columns are wrapped in a full-width row div!

class="column-row"

For centred splits see the correct wrap divs.

12 columns

class="twelve column-layout"

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris in congue ante. Ut porttitor bibendum turpis, non porta magna porttitor eget. Cras quam sem, venenatis in maximus at, hendrerit eu est. Morbi purus dolor, tempor eu venenatis ut, ornare quis nulla. Aenean maximus vel sapien quis lobortis.

10 columns centered

class="ten-twelfths column-layout column-centered"

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris in congue ante. Ut porttitor bibendum turpis, non porta magna porttitor eget. Cras quam sem, venenatis in maximus at, hendrerit eu est. Morbi purus dolor, tempor eu venenatis ut, ornare quis nulla. Aenean maximus vel sapien quis lobortis.

8 columns centered

class="eight-twelfths column-layout column-centered"

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris in congue ante. Ut porttitor bibendum turpis, non porta magna porttitor eget. Cras quam sem, venenatis in maximus at, hendrerit eu est. Morbi purus dolor, tempor eu venenatis ut, ornare quis nulla. Aenean maximus vel sapien quis lobortis.

1/2 split

class="one-half column-layout"

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris in congue ante. Ut porttitor bibendum turpis, non porta magna porttitor eget. Cras quam sem, venenatis in maximus at, hendrerit eu est. Morbi purus dolor, tempor eu venenatis ut, ornare quis nulla. Aenean maximus vel sapien quis lobortis.

1/2 split

class="one-half column-layout"

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris in congue ante. Ut porttitor bibendum turpis, non porta magna porttitor eget. Cras quam sem, venenatis in maximus at, hendrerit eu est. Morbi purus dolor, tempor eu venenatis ut, ornare quis nulla. Aenean maximus vel sapien quis lobortis.

2/3 split

class="two-thirds column-layout"

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris in congue ante. Ut porttitor bibendum turpis, non porta magna porttitor eget. Cras quam sem, venenatis in maximus at, hendrerit eu est. Morbi purus dolor, tempor eu venenatis ut, ornare quis nulla. Aenean maximus vel sapien quis lobortis.

1/4 split

class="one-quarter column-layout"

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris in congue ante. Ut porttitor bibendum turpis, non porta magna porttitor eget. Cras quam sem, venenatis in maximus at, hendrerit eu est. Morbi purus dolor, tempor eu venenatis ut, ornare quis nulla. Aenean maximus vel sapien quis lobortis.

1/4 split

class="one-quarter column-layout"

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris in congue ante. Ut porttitor bibendum turpis, non porta magna porttitor eget. Cras quam sem, venenatis in maximus at, hendrerit eu est. Morbi purus dolor, tempor eu venenatis ut, ornare quis nulla. Aenean maximus vel sapien quis lobortis.

1/4 split

class="one-quarter column-layout"

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris in congue ante. Ut porttitor bibendum turpis, non porta magna porttitor eget. Cras quam sem, venenatis in maximus at, hendrerit eu est. Morbi purus dolor, tempor eu venenatis ut, ornare quis nulla. Aenean maximus vel sapien quis lobortis.

1/4 split

class="one-quarter column-layout"

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris in congue ante. Ut porttitor bibendum turpis, non porta magna porttitor eget. Cras quam sem, venenatis in maximus at, hendrerit eu est. Morbi purus dolor, tempor eu venenatis ut, ornare quis nulla. Aenean maximus vel sapien quis lobortis.

1/4 split

class="one-quarter column-layout"

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris in congue ante. Ut porttitor bibendum turpis, non porta magna porttitor eget. Cras quam sem, venenatis in maximus at, hendrerit eu est. Morbi purus dolor, tempor eu venenatis ut, ornare quis nulla. Aenean maximus vel sapien quis lobortis.

1/4 split

class="three-quarters column-layout"

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris in congue ante. Ut porttitor bibendum turpis, non porta magna porttitor eget. Cras quam sem, venenatis in maximus at, hendrerit eu est. Morbi purus dolor, tempor eu venenatis ut, ornare quis nulla. Aenean maximus vel sapien quis lobortis.