How to create the masonry effects with just bootstrap 3 grid system and css

Question

My issue is that i want to display data in a block format using the bootstrap 3 grid system however i dont want the annoying whitespace gaps that happen from the height bein

Answer 1

In Bootstap .row element is used for clearing floats of the div-blocks / col it contains (in your ex. col-lg-4);

So it's basically impossible to have elements in different rows stand next to each other, you necessarily need to change the markup;

On the other hand using bootstrap responsive column system could be helpful for making a CSS-Masonry effect:
you can try placing all "col-items" that you want to make the masonry effect on inside one row, displaying as inline-block(plus maybe some other little adjustments ..) should do the trick (this is the way to go for if you're stuck only with CSS..);

In conclusion remember that Masonry was born and remains a JavaScript grid layout library, so even if you can make it work with CSS I suggest you to use JS .

a thousand thanks to Desandro for this awesome idea;