Four columns

First column content

Each of these four content areas are three columns wide and are contained within a row.

A row accommodates a maximum of 12 columns, so if you want an area of your page divided into four columns you need to divide the row (made up of 12 columns) by four - giving you four equal areas of three columns.

Sample code in the next column...

Second column content

Sample code for this three column area is -

<div class="row">

<div class="three columns">
First column content
</div>

<div class="three columns">
Second column content
</div>

<div class="three columns">
Third column content
</div>

<div class="three columns">
Fourth column content
</div>

</div>

Third column content

Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Donec sed odio dui.

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam quis risus eget urna mollis ornare vel eu leo. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Maecenas sed diam eget risus varius blandit sit amet non magna.