Columns and Quotes

2-Column Layout 

<div class="left-2column"> 
<p> ... </p> 
</div> 
<div class="right-2column"> 
<p> ... </p> 
</div> 

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ut augue odio. Aliquam aliquam dolor at ante viverra in bibendum nisl interdum. Vivamus at erat sit amet ipsum porttitor consequat. Fusce commodo tincidunt convallis. Nulla rhoncus, dui sit amet dictum fermentum, justo leo ornare lectus, sed convallis augue nunc id dui. Morbi ac elit et turpis dapibus auctor suscipit eu erat.

Integer sapien nunc, auctor et commodo at, commodo pellentesque nibh. Aenean dictum placerat fermentum. Quisque tortor nisl, vehicula egestas fermentum in, consectetur non leo. Etiam pulvinar imperdiet mattis. Quisque pretium mattis lorem, et commodo nisi semper eu. Proin eu quam odio, in rhoncus velit. Ut pretium odio vel sapien laoreet facilisis.

3-Column Layout

<div class="left-3column"> 
<p> ... </p> 
</div> 
<div class="center-3column"> 
<p> ... </p> 
</div> 
<div class="right-3column"> 
<p> ... </p> 
</div> 

In ullamcorper consequat enim vestibulum facilisis. Nulla facilisis elit ac nibh pulvinar tristique. Nullam sagittis mauris eu tellus varius a varius elit porta. Fusce metus metus, lacinia quis faucibus at, dapibus ac arcu. Etiam metus tellus, fringilla nec sollicitudin nec, posuere id urna.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ut augue odio. Aliquam aliquam dolor at ante viverra in bibendum nisl interdum. Vivamus at erat sit amet ipsum porttitor consequat. Fusce commodo tincidunt convallis. Nulla rhoncus, dui sit amet dictum fermentum, justo leo ornare lectus, sed convallis augue nunc id dui.

Integer sapien nunc, auctor et commodo at, commodo pellentesque nibh. Aenean dictum placerat fermentum. Quisque tortor nisl, vehicula egestas fermentum in, consectetur non leo. Etiam pulvinar imperdiet mattis. Quisque pretium mattis lorem, et commodo nisi semper eu.

 

Quotes

The Quote classes give you an option to draw user attention to a content piece. Also, it presents a great way to break up text flow. You can align the quote classes to right, left, and centre.

class .quote
Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc. 

Praesent scelerisque eros sem, ut consequat arcu efficitur ac. Morbi consectetur rutrum lectus eu malesuada. Sed pulvinar congue est nec condimentum. Donec venenatis ex id velit maximus, nec porttitor mauris venenatis. Praesent nec vulputate sem, ac lobortis purus. Aliquam erat volutpat.

class .quote-left
Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna.

Praesent scelerisque eros sem, ut consequat arcu efficitur ac. Morbi consectetur rutrum lectus eu malesuada. Sed pulvinar congue est nec condimentum. Donec venenatis ex id velit maximus, nec porttitor mauris venenatis. Praesent nec vulputate sem, ac lobortis purus. Aliquam erat volutpat.

class .quote-right
Sed fringilla mauris sit amet nibh. 

Praesent scelerisque eros sem, ut consequat arcu efficitur ac. Morbi consectetur rutrum lectus eu malesuada. Sed pulvinar congue est nec condimentum. Donec venenatis ex id velit maximus, nec porttitor mauris venenatis. Praesent nec vulputate sem, ac lobortis purus. Aliquam erat volutpat.

Praesent scelerisque eros sem, ut consequat arcu efficitur ac. Morbi consectetur rutrum lectus eu malesuada. Sed pulvinar congue est.



Sample code for the quote

<div class="quote">Sed fringilla mauris sit amet nibh.</div>

<div class="quote-left">Sed fringilla mauris sit amet nibh.</div>

<div class="quote-right">Sed fringilla mauris sit amet nibh.</div>