Full Height Column Layout with Bootstrap

A great solution for making columns full height does not exist. Going into your CSS and setting an element to height: 100% rarely works. Several solutions have popped up to take multiple columns and make them equal height. However, none on their own seem to work for my particular situation.

Here’s the basic problem: Starting with Bootstrap 2.0 as a base, we want to make a multi-column layout that stretches at least the height of the page (Figure 1).

Figure 1 – Full Height Columns in Bootstrap

When I was building this, I encountered two solutions that partially worked. In one solution, the three columns would be of equal height, but if all the content was shorter than the page, then the columns wouldn’t stretch to the bottom (Figure 2).

Figure 2 – Equal Height Columns that Don’t Stretch

In a second solution, the content would not scroll. Instead, you would be stuck with whatever showed up on the page (Figure 3).

Figure 3 – Non-Scrolling Equal Height Columns

Luckily, there are concepts we can take from both of these solutions to achieve our goal. First, start with your basic page scaffolding (Figure 4).

Figure 4 – The HTML for a Basic Bootstrap pPge

This basic syntax leads to three columns that stretch to fill their content (Figure 5).

Figure 5 – A Basic Bootstrap Layout

Making this work is just a matter of a few lines of CSS (Figure 6).

Figure 6 – CSS for Equal Height Columns in Bootstrap

It’s as easy as that. You can see the full syntax in action here.