Columns layout

In each article, you can divided your content in several columns. See the examples below and don't forget the CSS class "last" in your last container. Under 980 pixels, the fifth parts are displayed in single line. Under 768 pixels, all the parts are displayed in single line.

one-half

Example of Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
View more

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

one-half last



<div class="one-half"> ... title, image, text ..... </div>

<div class="one-half last"> ... title, image, text ..... </div>

one-third

one-third last



<div class="one-third"> ... title, image, text ..... </div>

<div class="one-third"> ... title, image, text ..... </div>

<div class="one-third last"> ... title, image, text ..... </div>

one-third

two-third last



<div class="one-third"> ... title, image, text ..... </div>

<div class="two-third last"> ... title, image, text ..... </div>

one-fourth

one-fourth last



<div class="one-fourth"> ... title, image, text ..... </div>

<div class="one-fourth"> ... title, image, text ..... </div>

<div class="one-fourth"> ... title, image, text ..... </div>

<div class="one-fourth last"> ... title, image, text ..... </div>

one-fourth

two-fourth

one-fourth last



<div class="one-fourth"> ... title, image, text ..... </div>

<div class="two-fourth"> ... title, image, text ..... </div>

<div class="one-fourth last"> ... title, image, text ..... </div>

three-fourth

one-fourth last



<div class="three-fourth"> ... title, image, text ..... </div>

<div class="one-fourth last"> ... title, image, text ..... </div>

one-fifth

one-fifth last



<div class="one-fifth"> ... title, image, text ..... </div>

<div class="one-fifth"> ... title, image, text ..... </div>

<div class="one-fifth"> ... title, image, text ..... </div>

<div class="one-fifth"> ... title, image, text ..... </div>

<div class="one-fifth last"> ... title, image, text ..... </div>

two-fifth

one-fifth last



<div class="two-fifth"> ... title, image, text ..... </div>

<div class="two-fifth"> ... title, image, text ..... </div>

<div class="one-fifth last"> ... title, image, text ..... </div>

one-fifth

three-fifth last



<div class="one-fifth"> ... title, image, text ..... </div>

<div class="one-fifth"> ... title, image, text ..... </div>

<div class="three-fifth last"> ... title, image, text ..... </div>

four-fifth

one-fifth last



<div class="four-fifth"> ... title, image, text ..... </div>

<div class="one-fifth last"> ... title, image, text ..... </div>

Columns layout

one-half

Example of Title

one-half last

Example of Title

one-third

one-third

one-third last

one-third

two-third last

one-fourth

one-fourth

one-fourth

one-fourth last

one-fourth

two-fourth

one-fourth last

three-fourth

one-fourth last

one-fifth

one-fifth

one-fifth

one-fifth

one-fifth last

two-fifth

two-fifth

one-fifth last

one-fifth

one-fifth

three-fifth last

four-fifth

one-fifth last