| WordPress
How to Create Columns in Breeze WordPress 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
breeze wordpress columns

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>

breeze wordpress columns
  • Publish or update changes
  • Preview changes
breeze wordpress columns

The end result would look like this:

breeze wordpress columns

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>

breeze wordpress columns

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>

breeze wordpress columns

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>

breeze wordpress columns

Important: always add your columns in Text editor mode.


About the author

Valentín creates beautiful designs from amongst the tequila plants of Jalisco, Mexico. You can see Valentín's design work all over this site and you can often find him helping members in support.