Boostrap 3 Grid, Have the same height for all the columns of a row?

Question

I'm using Bootstrap 3 (and angularJs) and i'm trying to make it so all the column of a row have the same height whatever their content is.

But the grid uses float so of course each column only has its content height.

Is there any "out of the box" solution in bootstrap?

Thanks in advance

EDIT: Adding code

<div class="row-fluid">
<div class="col-md-6">
    <div class="row-fluid">
        <div class="col-md-1">

        </div>
        <div class="col-md-1">
            item
        </div>
        <div class="col-md-1">
           item
           item
           item
           item
           item
           item
           item
           item
           item
        </div>
        <div class="col-md-1">
           item
           item
           item
        </div>
        <div class="col-md-1">
           item
           item
           item
        </div>
        <div class="col-md-7">
           item
           item
           item
        </div>
    </div>
</div>
<div class="col-md-6">

</div>

I don't think there's an out of the box, but try jQuery? http://stackoverflow.com/questions/12330786/is-there-a-way-to-make-all-elements-in-a-row-class-the-same-height — Carol Skelly, Feb 11 '14 at 15:02

score 0 · Answer 1 · answered Feb 11 '14 at 15:16

Aside from jQuery to calculate the height of the tallest, you can also try something like this using CSS..

<div class="row">
        <div class="col-sm-4">
         some content
        </div>
        <div class="col-sm-4">
         some content
        </div>
        <div class="col-sm-4">
         some content more blah blah blah
        </div>  
</div>

CSS

[class*="col-"]{
    margin-bottom: -99999px;
    padding-bottom: 99999px;
}

.row{
    overflow: hidden; 
}

Demo: http://bootply.com/112728

Thanks for your answer, however since it's a nested grid i won't be able to use this. — TheBakker, Feb 11 '14 at 15:27

Boostrap 3 Grid, Have the same height for all the columns of a row?

1 Answers1