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

You can use the same trick I described in this answer.

In your case, you'd change the media queries to look like this:

@media (min-width: 768px) and (max-width: 991px) {
    .portfolio>.clear:nth-child(4n+4)::before {
      content: '';
      display: table;
      clear: both;
    }
}
@media (min-width: 992px) {
    .portfolio>.clear:nth-child(6n+6)::before {  
      content: '';
      display: table;
      clear: both;
    }
}

768px - 991px is the sm size, you have col-sm-2, so you want every 4th div to clear. 992px and above relates to the md size, where you have col-md-3, so you want every 6th div to clear at that size. It's way easier than using the responsive resets, although it's based on the exact same premise.

P.S. I added a div with the row class inside your container (because you need one inside a container otherwise you will have double padding on the outside) and I also gave it a class of portfolio for easy targeting. Here's your updated Bootply.