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.

Answer 2

You should use .clearfix, as described at the Grid responsive resets section of the Bootstrap documentation: https://getbootstrap.com/docs/3.3/css/#grid-responsive-resets

Answer 3

Why dont you use the <div class="row"></div> Have a look at this http://www.bootply.com/6bIZkSGcA1

Is this what you wanted.??

P.S. This will directly limit the boundaries to a row.

Answer 4

If you know how many thumbnails wide is your arrangement, then you can use <div class="row"></div> to wrap thumbnails in groups of three (or N).

Otherwise, the workaround would be to set a fixed height for the thumbnail element. On your example

.thumbnail {
   height:420px; 
}

However, if your thumbnail height and text can vary a lot, then it will either look awkward or hide part of the img/label.

Answer 5

you could use clear: left and apply it for each first child in row. For example if you have 4 items in row you can use:

.my-row>:nth-child(3n+1) {  
  clear:left;
  background-color: red; // just to see if the first item in row is matched
}

Answer 6

If you don't know how many columns you have, you can do:

.row.fix {
  display: flex;
  flex-wrap: wrap;
  width:100%; /*not always necessary*/
}

Working fiddle: https://jsfiddle.net/wqdm1jjt/

Example:

Author: Juan Miguel