bootstrap columns of same height without breaking layout

Question

This question is a follow-up to how can I make bootstrap columns all the same height. Based on one suggested solution I set up a js fiddle example to illustrate my problem, http://jsfiddle.net/4d666/

<div class="container">
    <div><h2 class="hero">a very long title</h2></div>
    <div class="row">
        <div class="col-md-4" style="border: 1px solid black;">
        <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
        </div>
        <div class="col-md-4" style="border: 1px solid black;">
            <p>foo</p>
        </div>
        <div class="col-md-4" style="border: 1px solid black;">
            <p>foo</p>
        </div>
    </div>
    <div><h2 class="hero">a very long title</h2></div>

    <div class="row">
        <div class="col-md-4" style="border: 1px solid black;">
            <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        </div>
        <div class="col-md-4" style="border: 1px solid black;">
            <p>foo</p>
        </div>     
    </div>
</div>

And the corresponding css inspired from bootstrap 3 responsive columns of same height.

/* try to remove this css to see the effect */

.container{
    display:table;
}

.row {
    display: table-row;
}

.row [class*="col-"] {
    float: none;
    display: table-cell;
    vertical-align: top;
}

The html in the fiddle shows my goal: I have a container with headings and rows and would like to have the columns aligned by height. The headings and the rows should be left aligned. When you run the fiddle without the css, you'll see the basic idea (the columns will not have the same size in that case). You can resize the result panel to see the columns collapse underneath each other (when the screen gets too small, as expected). When you run the fiddle with the css, you'll notice that the h2 text breaks after each word and is no longer aligned with the columns. Also resizing the panel makes the columns tremendously small but doesn't break them anymore.

I modified the fiddle to include the original answer which can be found here. The h2 alignes correctly this time but the second row doesn't align with the first row. Also as you resize the result panel, the columns do no longer collapse.

Is it possible to achieve this via css? or is javascript the only alternative?

It's kinda hard to visualize what you're trying to achieve via your descriptions. Maybe you could include some sort of visual to guide us? — Dominic, May 15 '14 at 01:39
Jan's answer explains some flaws in the html markup. When I get rid of the h2 headings (or move them out of the container) it works better (http://jsfiddle.net/4d666/3/). My goal was to simply have multiple rows with tiles of the same height, each row is separated with a heading. The remaining question would be: why are the tiles so small when I resize the result-panel? — shaft, May 15 '14 at 12:05
shaft: That's because your tiles have a variable width (by using `.col-md-4`) which adjusts depending on the `@media` screen size. — Jan, May 15 '14 at 12:21

score 1 · Accepted Answer · answered May 15 '14 at 11:36

Okay, I'm not sure I understand what you are trying to achieve, but I can tell you why the headlines are behaving so awkwardly. You are defining your .container to behave like a table, your .row to behave like a table-row, and your .col to behave like a table-cell. But you put your <h2> right in the middle of that. So what you basicially do is this:

<table>
  <h2>...</h2>
  <tr>
    <td>...</td>
  </tr>
</table>

The browser simply doesn't know how to handle this and that's why your headlines are behaving so weirdly in your jsfiddle. Put the <h2> either outside the .container or in another .col (which is inside a .row).

As for the rest of the problem, could you elaborate a little bit more?

I am trying to create multiple rows in bootstrap where each row is separated with a heading and the columns in the row have the same height. — shaft, May 15 '14 at 12:08

score 1 · Answer 2 · answered May 16 '14 at 05:52

If I understood your explanation correctly, I think this is what you need:

<div class="row">
    <div class="col-md-12"><h2>Heading Content</h2></div>
    <div class="row">
         <div class="col-md-4 classToFixHeight">Column 1</div>
         <div class="col-md-4 classToFixHeight">Column 2</div>
         <div class="col-md-4 classToFixHeight">Column 3</div>
    </div>
</div>

This is basically expounding on what Jan has answered, but relating it more to Bootstrap 3 since it's what you're using.

Now to explain my answer, in order for you to have each row separated by a heading you need to specify that you want the columns into next rows and not be in the same one as your heading. You can easily do this via bootstrap's .row. I even wrapped your <h2> with .col-md-12 to force it to occupy the entire row.

bootstrap columns of same height without breaking layout

2 Answers2