Creating a column layout in Customizr

The Customizr theme is built on Twitter Bootstrap, which means that you can use the awesome built-in grid system included in Bootstrap.

About the grid system

The Bootstrap grid system uses a 12 columns grid. There are two types of grid system in the Bootstrap :

1. Default grid system where each column width is set in pixels (uses the .row  class)
2. Fluid grid system where the column width is set in percents (uses the .row-fluid  class)

Both grid types have the same responsive capabilities, but I tend to prefer the fluid grid system, and that’s the one I am gonna describe here.

To create a column layout, first create a .row-fluid  and add the appropriate number of .span*  columns. Each.span* spans a number of the 12 columns, and should always add up to 12 for each row (or the number of columns in the parent).

×
Using the code in Customizr To use the following examples inside a post or page content, copy and paste the code in the WordPress HTML editor.
To access the HTML editor, click on the “text” tab in the top right of the WordPress post/page WYSIWYG editor see picture below.

1/2 – 1/2 layout

<div class="row-fluid">
<div class="span6">...</div>
<div class="span6">...</div>
</div>

1/3 – 2/3 layout

<div class="row-fluid">
<div class="span4">...</div>
<div class="span8">...</div>
</div>

3/4 – 1/4 layout

<div class="row-fluid">
<div class="span9">...</div>
<div class="span3">...</div>
</div>

1/4 – 1/4  – 1/4 – 1/4 layout

<div class="row-fluid">
<div class="span3">...</div>
<div class="span3">...</div>
<div class="span3">...</div>
<div class="span3">...</div>
</div>

1/3 – 1/4 layout with offset

Using Bootstrap you can also easily move columns to the right using .offset*  classes. Each class increases the left margin of a column by a whole column. For example,.offset4  moves .span4  over four columns.

<div class="row-fluid">
<div class="span4">...</div>
<div class="span3 offset5">...</div>
</div>

More infos about the Bootstrap Grid System here