Create WordPress Columns using Bootstrap in the Breeze Theme
One of our users needed to display content in two columns in a page while using our Breeze WordPress theme. Since the theme is based on Bootstrap 2, it already includes support for columns.
In this tutorial, we will show you how to add columns to posts and pages with a few examples.
Step #1. Access your content
- Edit or create a new page or post
- In the editor, switch to Text
Step #2. Create the span classes
The key to columns are the span classes, such as span8, span6, span4, span3, etc. The total value between them per row should be 12.
Here’s an example for two columns:
span6 + span6 = span12
Create content in two columns
To display content in two columns, use the example below:
<div class="row-fluid">
<div class="span6">
[ YOUR TEXT GOES HERE ]
</div>
<div class="span6">
[ YOUR TEXT GOES HERE ]
</div>
</div>
- Publish or update changes
- Preview changes
The end result would look like this:
Create content in three columns
To display content in three columns:
<div class="row-fluid">
<div class="span4">
[ YOUR TEXT GOES HERE ]
</div>
<div class="span4">
[ YOUR TEXT GOES HERE ]
</div>
<div class="span4">
[ YOUR TEXT GOES HERE ]
</div>
</div>
Create content in four columns
Four columns:
<div class="row-fluid">
<div class="span3">
[ YOUR TEXT GOES HERE ]
</div>
<div class="span3">
[ YOUR TEXT GOES HERE ]
</div>
<div class="span3">
[ YOUR TEXT GOES HERE ]
</div>
<div class="span3">
[ YOUR TEXT GOES HERE ]
</div>
</div>
Creating content in two columns with different widths
You can also display two columns with different sizes:
<div class="row-fluid">
<div class="span4">
[ YOUR TEXT GOES HERE ]
</div>
<div class="span8">
[ YOUR TEXT GOES HERE ]
</div>
</div>
Important: always add your columns in Text editor mode.