Broken grid on some sizes

[NathanHazout]

I took your idea and adapted it to a video gallery.

See: http://jsfiddle.net/mk2r974o/

Sometimes it looks fine:

Sometimes it puts one of the videos on the right:

I can't catch what the differences are in the code....

[michaelsoriano]

Hi @nasht00,

I updated the code to support variable heights for the images. See the new demo: https://rawgit.com/michaelsoriano/bootstrap-photo-gallery/master/demo.html

Basically you need to add an element that will clear the items. Bootstrap has a class for this called "clearfix".

The element needs to be added where you want them to clear. For example, if you're using "col-lg-2" (which means 6 columns), right after the 6th image, you add the element

In addition, you have to add helper classes to only make them appear at certain viewports, such as "visible-lg-block"

So the element will have classes like below:

"clearfix visible-lg-block"

[NathanHazout]

Thank you.
That's going to be a pain when the list is dynamically generated by code...

[michaelsoriano]

Yes it looks like a bit of a challenge writing it dynamically. You should look into http://masonry.desandro.com/. This can go on top of what you already have.