How to make a responsive grid of photos using Twitter Bootstrap if heights are different

Question

How can I Twitter Bootstrap 3\'s \'img-responsive\' images, but allow them to have a set height so that a grid of photos will flow (unlike the below image)?

I\'ve tried

Answer 1

There are 3 overall approaches to grid alignment / height issues in Bootstrap

A CSS only approach like this this..

http://bootply.com/85737

A 'clearfix' approach like this this (requires iteration every x columns)..

http://bootply.com/89910

Finally, you could use the Isotope or Masonry plugin. Here is a working example that uses Isotope + Bootstrap 3:

http://bootply.com/109446

More on the Bootstrap height issue