The Customizr Theme for WordPress is built on the super awesome Twitter Bootstrap (regular readers will know that I love Font Awesome which is designed for Twitter Bootstrap). Whilst developing a WordPress Website using Customizr for a client recently, I had the need to add content into columns in a Page. Unfortunately I couldn’t find anywhere that describes how to create various width columns (I’ve previously described how to create columns with the Genesis / StudioPress Themes).
As mentioned, Customizr is built using the HTML5 and CSS3 Twitter Bootstrap. This means that we can use the same means of creating column as we would for any other Twitter Bootstrap based Theme that uses the default Bootstrap Grid System. Therefore we just need to follow the instructions for creating columns at Scaffolding. As an example, here is the HTML we’d use to create two columns:
<div class="row"> <div class="span6">Column 1 content</div> <div class="span6">Column 2 content</div> </div>
In the code above, the 6 indicates 50% as the total width of columns must equal 12. In the example below we are creating one column 50% wide and two columns 25% wide each.
<div class="row"> <div class="span6">Column 1 content</div> <div class="span3">Column 2 content</div> <div class="span3">Column 3 content</div> </div>
There we have it. Simple!