Bootstrap 3 grid with different height in each item - is it solvable using only CSS?

Question

I\'m trying to make a grid of thumbnails, where each thumbnail has an image and a label. It works fine if all the labels have the same length, because then all the thumbnail

Answer 1

I think it's better to use some few row of js. With CSS you could only have a new "row" using clearfix class (as answered before), but each div will have different height. If you wish to set the same height to each dynamic div, I think you could do it only by js.

  $(document).ready(function() {
    var maxHeight = 0;          
    $(".equalize").each(function(){
      if ($(this).height() > maxHeight) { maxHeight = $(this).height(); }
    });         
    $(".equalize").height(maxHeight);
  }); 

Here is a working demo based on your code.

All what you have to do is giving the same class to each main div inside the col--, and than run a each() function in js that give to them the same height (the max-one).

Your HTML structure should looks like that: