Bootstrap: Equal height of nested col-md-* elements

Question

I haven't found any working solution for my problem so I really hope you can help me.

Here is my jsfiddle.

@import url('http://getbootstrap.com/dist/css/bootstrap.css');

<!-- snippet 1 -->
<div class="col-md-12 col-sm-12">
    <div class="col-md-6 col-sm-6" style="padding:0;">
        <div class="well" style="border-right:1px solid black;">
            Test
        </div>
    </div>
    <div class="col-md-6 col-sm-6" style="padding:0;">
        <div class="well">
            srewdf<br>srewdf<br>srewdf<br>srewdf<br>
        </div>
    </div>
</div>
 
<!-- snippet 2 -->
<div class="col-md-12 col-sm-12">
    <div class="col-md-9 col-sm-9" style="padding:0;">
        <div class="well" style="border-right:1px solid black;">
            srewdf<br>srewdf<br>srewdf<br>srewdf<br>
            srewdf<br>srewdf<br>srewdf<br>srewdf<br>
        </div>
    </div>
    <div class="col-md-3 col-sm-3" style="padding:0;height:50%;">
        <div class="well">
            Test
        </div>
    </div>
    <div class="col-md-3 col-sm-3" style="padding:0;height:50%;">
        <div class="well">
            Test
        </div>
    </div>
</div>

In snippet 1 I need multiple nested elements to have the same height based on the largest element. In the second snippet it's similar. The two elements on the right side should have together the same height as the element on the left.

How is it possible to solve this without losing the responsibility?

Thanks for your time and help!

Bootstrap does not help you with height. Possible duplicate: http://stackoverflow.com/questions/9787999/making-two-side-by-side-divs-heights-equal — He Hui, Nov 22 '14 at 17:23
Indeed it doesn't help me. This is why I'm trying to find another solution. The example in your link looks interesting. I'll try that. — sleepless, Nov 22 '14 at 17:43
Bootstrap is CSS and js. You can use numerous solutions, jQuery MatchHeight, display:table/table-cell, padding-bottom, etc., this question comes up frequently, look harder — Christina, Nov 22 '14 at 18:08

score 0 · Answer 1 · answered Nov 22 '14 at 19:20

Equal height columns is a famous problem in the CSS model, and Bootstrap can do very little to help you.

The best you can do is read the broad amount of literature out there (I recommend starting with http://css-tricks.com/fluid-width-equal-height-columns/) and work out which of the various hacks and limitations are the correct fit for your purposes. This will differ based on the target browsers, the amount of time you want to invest, your experience with Javascript and the devices you're targeting.

score 0 · Answer 2 · answered Nov 22 '14 at 19:24

Thanks for all your answers / comments.

This is how I solved it now:

$( document ).ready(function() {
    var heights = $(".equalize").map(function() {
        return $(this).height();
    }).get(),

    maxHeight = Math.max.apply(null, heights);

    $(".equalize").height(maxHeight);
});

I hoped that I can do it with plain HTML/CSS but yeah, this is the simple way.

Bootstrap: Equal height of nested col-md-* elements

2 Answers2