Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Is it possible to create a pinterest-like layout with Bootstrap only?

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

like image 204
Matt Avatar asked Sep 24 '12 18:09

Matt


People also ask

What is bootstrap layout?

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.

How does Pinterest layout work?

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.


2 Answers

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.

like image 191
Bernardo Siu Avatar answered Oct 15 '22 20:10

Bernardo Siu


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!

like image 39
Christopher G Avatar answered Oct 15 '22 22:10

Christopher G