Mar 06, 2013

Full Height Column Layout with Bootstrap

Marcelo Somers

Marcelo Somers

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).

Equal height columns that don’t reach the bottom

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).

Basic Columns using Bootstrap

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.

    Conversation Icon

    Contact Us

    Ready to achieve your vision? We're here to help.

    We'd love to start a conversation. Fill out the form and we'll connect you with the right person.

    Searching for a new career?

    View job openings