How Can I Keep The Grid Of 4 X 2 With Different Size Of Images With Bootstrap

I have a grid of 4 x 2 with product images and some text overlaying the image. The problem is that the images are going to be all different aspect ratios. What tends to happen is t

Solution 1:

You can't make all the images as the same size without cutting off.

What you can do is adding the necessary clear fix on the items, for every size you're targeting. That will make the them stay in the correct grid. Bootstrap targets those three breakpoints.

Demo:http://jsfiddle.net/w533z8Lg/5/

@media (min-width: 768px) {
    .featured_products.item:nth-child(2n+1) {
      clear: both;
    }
}

@media (min-width: 992px) {
    .featured_products.item:nth-child(2n+1) {
      clear: none;
    }
    .featured_products.item:nth-child(3n+1) {
      clear: both;
    }
}

@media (min-width: 1200px) {
    .featured_products.item:nth-child(3n+1) {
      clear: none;
    }
    .featured_products.item:nth-child(4n+1) {
      clear: both;
    }
}

Solution 2:

I have had this issue before with projects I was working on. What I ended up doing was using the Masonry library in conjunction with Bootstrap. http://masonry.desandro.com/. My conditions were the aspect ratio had to remain, they had to have the same width, and the I knew the heights would be unpredictable.

Granted, it doesn't keep all things in a straight horizontal line, but it sure eliminates the huge empty white spaces that you're talking about.