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

paulalexandru has a great answer that I used to solve my issue. However it doesn't address the problem that occurred for me when I resized the window. Sometimes the text would extend past the height specified and bleed into text in the row below.

So I added a second function that would detect the window resize, reset the height to auto and then set the height on the div if greater than 967. The 967 number can be changed to whatever number you wish to use when responsive brings everything down to just one column.

$(window).resize(function () {

        // reset height to auto.
        $(".div-name1").height("auto");  
        $(".div-name1").height("auto");            

        // check if the width is greater than 967 under 967 responsive switches to only 1 column per row
        if ($(window).width() > 967) {
            // resize the height
            myresize1(".row-name1", ".div-name-row1");
            myresize1(".row-name2", ".div-name-row2");
         }

            function myresize1(name1, name2) {
                $(name1).each(function () {
                    var heights = $(this).find(name2).map(function () {
                        console.log($(this).height() + " - ");
                        return $(this).height();
                    }).get(),

                    maxHeight = Math.max.apply(null, heights);
                    console.log(maxHeight + " - ");
                    $(name2).height(maxHeight);
                });
            };            
    });