Column Examples

To create a columnar layout think of a 12-grid system where the combined width of each column must equal 12. This is done by creating <div> calling a predefined class. For example a 2-column layout would be comprised of two <div class=”col-md-6″>Content goes here.</div>. As an example:

<div class=”col-md-6“>
<h3>Left Column</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse mattis quam ante, vel bibendum nibh mollis non. Sed eget nisl libero. Proin a convallis enim. Curabitur mollis magna a mauris hendrerit vulputate.</p>
</div>
<div class=”col-md-6“>
<h3>Right Column</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse mattis quam ante, vel bibendum nibh mollis non. Sed eget nisl libero. Proin a convallis enim. Curabitur mollis magna a mauris hendrerit vulputate.</p>
</div>

Not how the 2 bolded 6’s add up to 12?

The main thing to remember…

To utilize the columnar layout to its full potential remember to set the “Template” to “Full Page Width” as seen in the screenshot to the left. If you forget to set the correct template you will notice it because the right side of the page will have a large amount of white-space. Not necessarily broken, but not ideal either.

2-Column Design Example

3-Column Design Example

Mixed Width 2-Column Design Example