Bootstrap: Exceed 12 Columns in a Row?

Yes, and it’s essential for responsive design

Bootstrap is a framework intended for responsive design.

Bootstrap Grid — Responsive 101

Even if you think you know this, please read it anyway.

<div class="container">
    <div class="row">
        <div class="col-md-4">..</div>
        <div class="col-md-4">..</div>
        <div class="col-md-4">..</div>
    </div>
</div>

Shown above is a very simple 3 column layout. It renders like this…

Bootstrap — 3 columns across, 33% width each

As you may know Bootstrap’s grid has 12 column units. Notice that we used three col-md-4 column units, and each one consumes 4 out of the 12 units 12/3=4. So far, so good.

Next, we want another row of columns. The glaringly obvious markup…

<div class="container">
    <div class="row">
        <div class="col-md-4">..</div>
        <div class="col-md-4">..</div>
        <div class="col-md-4">..</div>
    </div>
    <div class="row">
        <div class="col-md-4">..</div>
        <div class="col-md-4">..</div>
        <div class="col-md-4">..</div>
    </div>
</div>

Bootstrap — 2 rows of 3 columns

Perfect. Can we make it better?

Right about here is when when I start to lose people, so be patient.

Can I do this intead? Can I put all the columns in one row?

<div class="container">
    <div class="row">
        <div class="col-md-4">..</div>
        <div class="col-md-4">..</div>
        <div class="col-md-4">..</div>
        <div class="col-md-4">..</div>
        <div class="col-md-4">..</div>
        <div class="col-md-4">..</div>
    </div>
</div>

Bootstrap Newbie: No, that won’t work. The Bootstrap grid has only 12 columns, so you should never have more than 12 columns in a row. You should have only 3 col-md-4 in each .row element, because 3*4=12.

Me: Ok, that sounds reasonable. But, suppose I want a responsive layout. I want 3 columns across on medium & large width screens, and only 2 columns across on the smallest width screens. I want my layout like this:

Desired small width layout — 2 columns across

Desired large width layout — 2 columns across

Newbie: Ok, so lets think “mobile-first”, and build the smallest width layout of 2 columns across…

<div class="container">
    <div class="row">
        <div class="col-xs-6">..</div>
        <div class="col-xs-6">..</div>
    </div>
    <div class="row">
        <div class="col-xs-6">..</div>
        <div class="col-xs-6">..</div>
    </div>
    <div class="row">
        <div class="col-xs-6">..</div>
        <div class="col-xs-6">..</div>
    </div>
</div>

Newbie (con’t): Then, add the column widths for the large screen, ensuring that each .row never exceeds 12 column units. As I said before, “you should never have more than 12 column units in a row”…

<div class="container">
    <div class="row">
        <div class="col-xs-6 col-md-4">..</div>
        <div class="col-xs-6 col-md-4">..</div>
    </div>
    <div class="row">
        <div class="col-xs-6 col-md-4">..</div>
        <div class="col-xs-6 col-md-4">..</div>
    </div>
    <div class="row">
        <div class="col-xs-6 col-md-4">..</div>
        <div class="col-xs-6 col-md-4">..</div>
    </div>
</div>

Me: Ok, let’s see how it works.

First, let’s try it on a smaller width screen…

OK — 2 columns across on smaller width screens

Ok good. Now, check the larger width screen…

Fail — only 2 columns across on larger width screens

Hmmm, no that doesn’t work. Here’s why.

Remember, we want the layout to have 3 columns across on larger screens. Let me explain why it does not work. Earlier when I asked, “Can I put all the columns in one row?, like this…”

<div class="container">
    <div class="row">
        <div class="col-md-4">..</div>
        <div class="col-md-4">..</div>
        <div class="col-md-4">..</div>
        <div class="col-md-4">..</div>
        <div class="col-md-4">..</div>
        <div class="col-md-4">..</div>
    </div>
</div>

The newbie’s answer was, “No. The grid has only 12 columns, so you should never have units that exceed 12 in a row”.

It’s the misconception that only 12 can be in a single .row that make it impossible to obtain the desired layout.

The Necessity of Column Wrapping

Here’s the correct way to make the desired responsive layout. Yes, put all the columns in a single row element. It doesn’t matter that the total units exceed 12:

<div class="container">
    <div class="row">
        <div class="col-xs-6 col-md-4">..</div>
        <div class="col-xs-6 col-md-4">..</div>
        <div class="col-xs-6 col-md-4">..</div>
        <div class="col-xs-6 col-md-4">..</div>
        <div class="col-xs-6 col-md-4">..</div>
        <div class="col-xs-6 col-md-4">..</div>
    </div>
</div>

2 columns on small widths…

OK — 2 cols across on smaller width screens

3 columns on larger widths…

OK — 3 cols across on larger width screens

So, now you know, it’s OK to exceed 12 column units in a single .row element.

It’s not only OK, it’s often required for responsive design

This technique is known as column wrapping, and it’s one of Bootstrap’s most powerful responsive design features. The desired layout would not be possible (other than duplicating markup) if we tried to stick with the misconception that column units must add up to 12 in a single row. It also works better when you have an unknown number of columns, or columns are being generated dynamically.

However, there is something to be aware of when putting all your columns in a single .row…

Bootstrap 3’s floating columns can wrap unevenly when there is variance in height between the columns. For this reason, Bootstrap provides responsive resets known as “clearfix”.

Read the whole story about varying column heights in Bootstrap here.