Same height column bootstrap 3 row responsive

Question

Hi I have four divs in a bootstrap row. I want all divs in this row to have the same height and not break responsibility. I don\'t know how to do this without breaking respo

Answer 1

Bootstrap's experiment, as mentioned by @cvrebert, works for me on Microsoft Internet Explorer (version 11) and Mozilla Firefox (version 37), but does not work for me on Google Chrome (version 42, 64-bit).

Inspired by @cvrebert's and @Maxime's answers, I came up with this solution, that works for me on those three browsers. I decided to share it, so maybe others can use it too.

Suppose you have something like this in your HTML:

    

        Your content
    
    

        Your content
    
    

        Your content
    
    

        Your content
    

Add this to your JS:

$(document).ready(function() {
    $(".row-eq-height").each(function() {
        var heights = $(this).find(".col-eq-height").map(function() {
            return $(this).outerHeight();
        }).get(), maxHeight = Math.max.apply(null, heights);

        $(this).find(".col-eq-height").outerHeight(maxHeight);
    });
});

It uses jQuery's .outerHeight() function to calculate and set the inner div's heights.

Also, I added this to my CSS, I'm not sure if this helps, but it surely does not hurt:

.row-eq-height {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}