I am trying to the get my head around this for quite some time now:
Is it possible to create a pinterest Layout with Twitter Bootstrap only? I know there are jQuery Plugins like Masonry, but is there no way without them?
Thanks
Bootstrap's grid system uses a series of containers, rows, and columns to layout and align content. It's built with flexbox and is fully responsive. Below is an example and an in-depth look at how the grid comes together.
They position all of their boxes/pins dynamically by iterating through them all, calculating the height, and dropping it at the bottom of whichever column that has the shortest height at the moment (adding that box's height to it). Basically, there's no trick to it, it's just Javascript.
Found a (free) template at http://bragthemes.com/demo/pinstrap/. It's supposed to have all you are asking for. Haven't had time to check it out, though.
Edit 2016-03-15: Bootstrap 4 allows this out of the box here. It's still in alpha, but we're getting there.
Found this solution, works within bootstrap (works even without defining column sizes), doesn't require javascript -- I snapped it into a project and it works beautifully:
http://www.bootply.com/118335
Bless you @katiejones!
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With