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

I think that the paulalexandru's answer is quite good. I would only add some code to avoid troubles when the window is resized. If the div with the biggest height contains a photo, you could have troubles when the width of the image changes because it will change it's height also, so in this case you should deal with resizeevent.

$( document ).ready(function() {
    toAdapt();
    window.onresize=function(){toAdapt};       

});


function  toAdapt(){
    var heights = $(".well").map(function() {
        return $(this).height();
    }).get(),

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

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

Answer 2

You can make use of the display:table properties:

.row {display:table; width:100%; border-spacing:10px; }
.col-md-3 {display:table-cell; width:25%;}

Example

Update

As people seem to be downvoting this as it breaks bootstrap, you should really be targeting the elements with different classes to what bootstrap uses - so here is an updated fiddle that won't break the rest of bootstrap - for the above code, if you add another class of table-row to the row, then you can use the following styles:

@media (min-width: 992px) {
  .row.table-row {
    display: table;
    width: 100%;
    min-width: 800px;
    border-spacing: 10px;
  }
  .row.table-row > .col-md-3 {
    display: table-cell;
    width: 25%;
  }
  .row.table-row > .col-md-3 {
    float: none;
  }
}

Example

Answer 3

You can achieve this by using javascript. Find out the biggest height of the 4 divs and make all of them at the same height like the biggest one.

Here is the code:

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

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

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

edit history: changed the ',' sign into ';' sign

Answer 4

To have same columns height and not breaking responsiveness, you should try this:

https://github.com/liabru/jquery-match-height

It uses "JQuery". Until now, for me, It is the simpliest solution out there.