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 responsibility.

I have tried solving this with fixed heights but in terms of responsiveness this is a bad solution.

Thanks :-)

<div class="row">     <div class="col-md-3 index_div_item">         <a href="#">         <div class="well" id="item1">                 <h1 class="h1_item"><span class="titre_item">Title</span></h1>                 <h2 class="h2_item_glyphicon"><span class="glyphicon glyphicon-ok-circle"></span></h2>                 <p>sidiis amicorum mariti inops cum liberis uxor alitur Reguli et dotatur ex aerario filia Scipionis, cum nobilitas florem adultae virginis diuturnum absentia pauperis erubesceret patr</p>                         </div>         </a>     </div>         <div class="col-md-3 index_div_item">         <a href="#">             <div class="well" id="item2">                 <h1 class="h1_item"><span class="titre_item">Title</span></h1>                 <h2  class="h2_item_glyphicon"><span class="glyphicon glyphicon-stats"></span></h2>                 <p>sidiis amicorum mariti inops cum liberis uxor alitur Reguli et dotatur ex aerario filia Scipionis, cum nobilitas florem adultae virginis diuturnum absentia pauperis erubesceret patr</p>             </div>           </a>     </div>         <div class="col-md-3 index_div_item">         <a href="#">             <div class="well" id="item3">                 <h1 class="h1_item"><span class="titre_item">Title</span></h1>                 <h2  class="h2_item_glyphicon"><span class="glyphicon glyphicon-send"></span></h2>                 <p>sidiis amicorum mariti inops cum liberis uxor alitur Reguli et dotatur ex aerario filia Scipionis, cum nobilitas florem adultae virginis diuturnum absentia pauperis erubesceret patr</p>             </div>         </a>      </div>       <div class="col-md-3 index_div_item">         <a href="#">             <div class="well" id="item4">                 <h1 class="h1_item"><span class="titre_item">Title</span></h1>                 <h2  class="h2_item_glyphicon"><span class="glyphicon glyphicon-cog"></span></h2>                 <p>sidiis amicorum mariti inops cum liberis uxor alitur Reguli et dotatur ex aerario filia Scipionis, cum nobilitas florem adultae virginis diuturnum absentia pauperis erubesceret patr</p>                             </div>           </a>       </div>               </div> 

Answer 1

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 2

There was at one point an official experimental example of same-height columns using CSS flexbox with Bootstrap. Here's the gist of it:

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

And then use <div class="row row-eq-height"> instead of <div class="row">.

Note that flexbox isn't supported in IE<10.