Bootstrap 3: How to create responsive, square .thumbnail divs

Question

I have created a grid of images using Bootstrap 3's .thumbnail class. Everything seems to be working great with regards to the images resizing, and the columns changing depending on the window size. The only problem is the images are all different sizes, and both portrait/landscape orientation. This causes awkward breaks and "pile-ups" with the thumbnail divs…

I was hoping to find a way to create a grid of SQUARE responsive divs using the .thumbnail class. So in other words, the width determined by Bootstrap would be mirrored in the div's height. E.g. the thumbnail image is scaled to 220px so the height of the div containing it would be set to 220px as well (and the thumbnail image inside scales up to 100% of eight the height or width, depending on orientation). Sort of like this:

Here is the basic code I'm using:

<div class="container">
  <div class="row">
    <div class="col-xs-12 col-sm-4 col-md-3">
      <a href="<?php echo dirname($image->url()); ?>/detail/<?php echo $image->name() ?>-detail.jpg" class="thumbnail fancybox" rel="group"><img src="<?php echo $image->url() ?>"></a>
    </div>
  </div>
</div>

Thanks so much for any help you might be able to offer. I'm also open to suggestions for other approaches. I even tried using jquery Isotope's masonry setting to solve the pile up problem but couldn't get it to work :(

Answer 1

You could try a CSS only approach like this this..

http://bootply.com/85737

However, this is not cross-browser compatible so you still may want to use the Isotope plugin. Here is a working example that uses Isotope + Bootstrap..

http://bootply.com/61482

Answer 2

I have created a small plugin for bootstrap, called bootstrap-grid-h. You can try using it. It is css only solution. You can find it here: bootstrap-grid-h

Answer 3

For something like this I would recommend using masonry which will give you a pinterest effect where images will fit in a block style without breaks.

such as: http://osvaldas.info/responsive-jquery-masonry-or-pinterest-style-layout