Page Columns

To give you more flexible layouts, you can use page columns (content columns) which uses the Bootstrap framework. Using Bootstrap 3, you get a 12 grid column layout which is also responsive. To read more documentation on the grid layout, check out the Bootstrap website here:

Bootstrap Grid

Circumference is built using Bootstrap and the overall width uses the grid system. Basically the width is made up of 12 grid columns and uses css classes to create varying widths of containers, for example, the logo container and the main navigation container uses this method where the logo is 5 grid columns wide and the nav is 7 grid columns wide.

Getting Sample Columns

In your original downloaded theme package is a folder called HTML Snippets. Inside that is a text file “Columns” which you can use to get you started and offers some instructions as well. You can create your own layout using the col-md-n (n will be the number of columns you want to use) for your columns. For example, if you want two columns in your page, both containers would use this class:


This is what your column layout would look like:

<div class="row">
<div class="col-md-6">Some content here</div>
<div class="col-md-6">Some content here</div>


Make sure your columns are wrapped with a container that uses the class=”row” so that it keeps your columns grouped.

Screencast Tutorial