Bootstrap grid column height hack

Say that three times fast :)

I recently integrated the Bootstrap grid into my toolbox because man, does it make life easier. It’s a simple, portable system for creating fluid, responsive grid layouts, with a number of cool features to boot (no pun intended). I think my favorite feature is the push-pull, allowing you to decide how the grid collapses when the window is reduced. Will the lefthand column be on top or fall below? This gives you a lot of control when toggling from a full-screen view on a 21″ monitor (or larger), down to smartphone size (and everything in between).

Since I started working with the Bootstrap grid, I’ve tried to find fault with it – any reason to convince myself that I’d be better off working with another system or developing my own. I haven’t been able to. All around it’s a great system.

There’s just one little thing that has come up, and in my mind it’s not a bug or a fault, just a reality of the web: the control of vertical space.

Set heights are not a problem. Define a fixed height, end of story. But what if that height needs to be fluid? What if it needs to be more or less tall depending on what’s inside?

Whether you’re trying to stretch your footer down to the bottom of the page, vertically align content, or stretch two containers with different content to be the same height, the problem is the same: when your content varies, controlling this vertical space is tricky.

For a site I worked on recently, columns in a couple places not only had different content and therefore different heights, but they also needed to have different backgrounds. And this is where the trouble started. So I came up with a nifty little hack to get around the problem (some of you may be doing this already, but I searched around, I didn’t find anything written on the subject).

Before getting into the hack, let’s look at how a simple row/column structure works.

With no background, we can have columns in a row (up to 12 with Bootstrap) with varying amounts of content and there is no problem. Visually, it looks fine. We can add rows, and even though the height of the content varies, the rows clear, falling neatly to the next line.

<div class="container">
    <div class="row">
        <div class="col-md-6">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div><!-- .col-md-6 -->
        <div class="col-md-6">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div><!-- .col-md-6 -->
    </div><!-- .row -->
</div><!-- .container -->

Here’s what it looks like:

If we add background color to the columns, we see that the columns don’t have the height:

Not so pretty, right? If by design both columns can have the same color, then we simply add the background to the outer row and the problem is solved.

But what if you need each column to have a different background, and have the bottom of the columns line up? To give them at least the illusion of being the same height? The hack starts here.

You will need to estimate which column will have less content – this is a workaround, not a perfect solution (and if you’ve got a better one, I’m all ears!).

First, give one of the background colors to the row. Then, give the other to the column that is taller than the other. Nested divs have a natural hierarchy: the inner content will always superpose the outer containers.

<pre><code><div class="container">
    <div class="row"  style="background-color: #CCC">
        <div class="col-md-6" >
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div><!-- .col-md-6 -->
        <div class="col-md-6" style="background-color: #9CF">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div><!-- .col-md-6 -->
    </div><!-- .row -->
</div><!-- .container -->

Beautiful! And in it’s non-collapsed state, we see that the default padding is respected. So far so good. But what happens when we collapse the row?

Depending on how your stylesheet, you may or may not have it set up to control the box model. Under the Bootstrap default stylesheet, and many resets common in modern WordPress themes, when you collapse your row, you’re likely to see something like this:

Not so beautiful. This is due to margin collapsing and the common box model reset. The bottom margin of the paragraph creates the space below it, but effects the outer container, therefore exposing the background color of our row.

The second part of the hack involves simply changing the paragraph spacing from margin to padding, and adding a little vertical padding to the columns if need be.

Nice! There are clearly lots of ways to accomplish this spacing depending on what kind of content you’re dealing with. The two main points are:

1. Use the power of div hierarchy to create the illusion of column height equality.
2. Swap out margins for padding to avoid margin collapse and adjust padding as needed.

I have an advanced version of this hack that I used on a recent project…want to see it? If I get enough requests in the comments below, you got it ;)