Apr 10, 2018- Explore ouinniu's board 'Map dashboard', followed by 106 people on Pinterest. See more ideas about Maps, User experience design and App. We present You Best HTML5 Dashboard Templates in 2017 Collection! We updated New Collection - Latest Admin Templates in 2018. Enjoy If you are creating some interesting and complex application you will probably need some Admin Dashboard Area, where users can see lots of data on one single screen/place.
Active1 year, 2 months ago
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
MattMatt92833 gold badges1111 silver badges1313 bronze badges
8 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.
Bernardo SiuBernardo 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:
Bless you @katiejones!
Christopher GChristopher G
EDIT: This is now out of the box in boostrap 4http://v4-alpha.getbootstrap.com/components/card/#card-columns
Sure Thing. Took me a while to work out. Hope this helps!
Apologies for the code dump but its necessary to show the grid working.
Sabba KeynejadSabba Keynejad4,46922 gold badges1818 silver badges1818 bronze badges
Yes, it is possible but with some limitations.
Principle
- Each column is a
div
(orsection
depending upon the meaning of your layout) - Within each column each tile is also be a
div
, orimg
etc. depending upon your design.
Practice
To make the columns you can use the following various techniques:
float
the columnsdisplay: inline-block
the columns- Use the new flexible box API (non-standard implementations are creeping into modern browsers)
- Use the new grid positioning API (although I'd avoid this for now as it's not supported hardly at all)
Then place various tiles (
div
s) in each column. Again, depending upon your design/layout you could replace the column-divs with ul
s, and have a list of tiles (li
s). I can't speak as to whether that is semantically correct for your design.Limitations
- Resizing the Pinterest page maintains the general position of most elements i.e. elements at the top of a column generally stays near the top, even when the number of columns is adjusted for the browser width - the pure CSS solution won't do that out of the box.
Work-Arounds
- While not a perfect solution, you can use media queries to influence the position of various elements.
With some time, one could get pretty close to the Pinterest layout - that said, there's probably a good reason they chose to implement said layout with JavaScript.
MattMatt3,03811 gold badge2222 silver badges3535 bronze badges
I know my answer is late. but just wanted this common question to be up dated. I found out 3 latest implementations.
- isotope. Found this on bootstrap website. Works well with infinite-scroll to build infinite scroll web pages too.
- Salvattore. This is achived with pure CSS and JS. JS is only used to pull data.
- masonry.desandro.com. This is a JS intensive implementation. but it has its own features.
1,63111 gold badge1717 silver badges2525 bronze badges
There we have a stuff named: bootstrap-waterfall:
http://mystist.github.io/bootstrap-waterfall/
http://mystist.github.io/bootstrap-waterfall/
But in fact, this plugin does not need bootstrap as it's dependencies. It's depends on whether you want to use bootstrap as your pin's markups or just style it yourself.
LiberLiber
Priyanshu KumarPriyanshu Kumar
For everyone who dont want want to go through the hassle of cross browser compatibility, here is a PHP solution. Assuming you have your data in an array,
RakeshRakesh
1,14811 gold badge99 silver badges1212 bronze badges
Not the answer you're looking for? Browse other questions tagged layouttwitter-bootstrapgridjquery-masonry or ask your own question.
Active4 years, 11 months ago
Over the weekend we had a massive hackathon in Sweden, and my pitch to the organizers a few weeks ago was to create a pinterest inspired web app for instagram, since they don't have a big web presence.
I am using twitter bootstrap to easy create the layout and wondering how I can perfect that pinterest type layout?
Here is a sample of the loop I am running.
Your help is much appreciated.
the address is http://instadashapp.com/
ApPeLApPeL2,59066 gold badges3838 silver badges7979 bronze badges
1 Answer
The Masonry javascript plugin is specifically written to create a grid of content that fills in as much whitespace as possible, if you're not opposed to including another plugin for your needs.
Jesse ProulxJesse Proulx