How can I make the bootstrap columns matchheights?

Question

How can I make the bootstrap columns matchheihts without puting rows in every 3 columns, these columns are from the database that I php foreach so I cannot put row.

I used matchHeight but not working, is there any other alternative way?

$(function() {
    $('.item').matchHeight(options);
    byRow: byRow
});


<script src="<?=base_url();?>assets/matcheight/jquery.matchHeight.js"
   type="text/javascript"></script>

Possible duplicate of [How can I make Bootstrap columns all the same height?](http://stackoverflow.com/questions/19695784/how-can-i-make-bootstrap-columns-all-the-same-height) — ankit, Aug 11 '16 at 03:46

score 2 · Accepted Answer · answered Aug 11 '16 at 03:42

2

Use a flexbox to solve it. Apply this to your container:

.container {
  display: flex;
  flex-wrap: wrap;
}

Try this out and let me know if this works for you. Thanks!

answered Aug 11 '16 at 03:42

kukkuz

41,512
6
59
95

wow, it works! :)) i been trying to solve this for 2 days. thank you sir! – vincent marc villafuerte Aug 11 '16 at 03:56
i cant believe that the answer is just 2 lines of css. hahaha. thank you again! :) – vincent marc villafuerte Aug 11 '16 at 03:57
sir,? there is another problem, some of the colums are not matching the width. :( – vincent marc villafuerte Aug 11 '16 at 04:27
the question was to adjust the height right? Can't do much without the code. Please post a new question with the full code for more improvements to your code. – kukkuz Aug 11 '16 at 06:13

score 0 · Answer 2 · edited Aug 11 '16 at 06:35

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>  
<script type="text/x-javascript">
$(document).ready(function(){

    // Select and loop the container element of the elements you want to equalise
    $('.container').each(function(){  

      // Cache the highest
      var highestBox = 0;

      // Select and loop the elements you want to equalise
      $('.col-md-4', this).each(function(){

        // If this box is higher than the cached highest then store it
        if($(this).height() > highestBox) {
          highestBox = $(this).height(); 
        }

      });  

      // Set the height of all those children to whichever was highest 
      $('.col-md-4',this).height(highestBox);

    }); 

});
</script>

How can I make the bootstrap columns matchheights?

2 Answers2