Creating a column layout in Customizr

⚠️ Code snippets might not be compatible with the latest version of your theme. Always use a child theme to customize your theme, and test your code on a staging website before migrating to production.

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.
HTML editor

 

1/2 – 1/2 layout

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

 

span6

 

span6

 

 

 

1/3 – 2/3 layout

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

 

span4

 

span8

 

 

3/4 – 1/4 layout

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

 

span9

 

span3

 

 

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>

 

span3

 

span3

 

span3

 

span3

 

 

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>

 

span4

 

span3 with offset5

 

 

More infos about the Bootstrap Grid System here

 

Leave a comment

Your email address will not be published. Required fields are marked *

47 thoughts on “Creating a column layout in Customizr”