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

EDIT 1 : I had to help someone with that so i made a plunkr. Go to "script.js" and comment "bootstrap_equalizer();" function to see original bootstrap, without same height columns.

I know this is a bit late but i'm sure that could improve your code and help some others ! :)

As i'm used to work with Foundation 5, when i have to work with bootstrap i miss the "equalizer".

I make a little function to call on pages where you have to "Equalize" some columns. My code is based on @paulalexandru response !

function bootstrap_equalizer() {
  $(".equalizer").each(function() {
    var heights = $(this).find(".watch").map(function() {
      return $(this).height();
    }).get(),

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

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

On html side, you just need to do this :

   

      

         Column 1
      

      

         Column 2
      
   

column 1 & column 2 will have same height ! You can of course have more than 2 columns !

Hope this can help ! =)