Best IT Recipes

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

I have been trying to keep my head around this for quite some time:

Can I create a Pinterest layout using Twitter bootstrap? I know there are jQuery plugins like Freemasonry, but is there no way without them?

thank

+48
layout twitter-bootstrap grid jquery-masonry
Sep 24 '12 at 18:16
source share
7 answers

A (free) template was found at http://bragthemes.com/demo/pinstrap/ . He should have everything you ask. However, I did not have time to verify this.

Edit 2016-03-15 : Bootstrap 4 allows this out of the box here . It's still in alpha, but we get there.

+48
Jan 27 '13 at 20:41
source share

I found this solution, it works in bootstrap (it works even without determining the size of the columns), it does not require javascript - I included it in the project and works fine:

http://www.bootply.com/118335

Bless you @katiejones !

+14
May 04 '14 at 7:28
source share

Yes, perhaps, but with some limitations.

Principle

  • Each column is a div (or section depending on the value of your layout).
  • In each column, each tile is also a div or img , etc. depending on your design.

Practice

To make columns, you can use the following various methods:

  • float columns
  • display: inline-block columns
  • Use the new flexible box API (custom implementations crawl in modern browsers).
  • Use the new grid location method (although I would avoid this for now, as it is almost not supported)

Then place different tiles ( div s) in each column. Again, depending on your design / layout, you can replace div columns with ul s and have a list of tiles ( li s). I can’t talk about whether this is semantically correct for your design.

Limitations

  • Resizing a Pinterest page supports the general position of most elements, i.e. the elements at the top of the column are usually near the top, even when the number of columns is adjusted for the width of the browser - a pure CSS solution, t make it out of the box .

workarounds

  • Although this is not an ideal solution, you can use media queries to influence the position of various elements.

For some time, you can get closer to the Pinterest layout - this suggests that there was probably a good reason why they decided to implement the mentioned layout using JavaScript.

+9
Sep 24 '12 at 18:35
source share

I know my answer is delayed. but just wanted this general question to be out of date. I discovered the last 3 implementations.

  • isotope . This is detected on the bootstrap site. Works well with infinite-scroll to create endless scroll web pages.
  • Salvattore . This is achieved using pure CSS and JS. JS is used only for data output.
  • masonry.desandro.com . This is an intensive implementation of JS. but it has its own characteristics.
+7
Dec 10 '14 at 4:37
source share

EDIT: This is now out of the box in boostrap 4 http://v4-alpha.getbootstrap.com/components/card/#card-columns

Sure. Spent me on time. Hope this helps!

Apologies for the dump code, but it is necessary to show the operation of the grid.

 <head> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script type="text/javascript" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/123941/masonry.js"></script> <script type="text/javascript" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/123941/imagesLoaded.js"></script> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous"> <!-- Optional theme --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css" integrity="sha384-aUGj/X2zp5rLCbBxumKTCw2Z50WgIr1vs/PFN4praOTvYXWlVyh2UtNUU0KAUhAX" crossorigin="anonymous"> <!-- Latest compiled and minified JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" integrity="sha512-K1qjQ+NcF2TYO/eI3M6v8EiNYZfA95pQumfvcVrTHtwQVDG+aHRqLi/ETn2uB+1JqwYqVG3LIvdm9lj6imS/pQ==" crossorigin="anonymous"></script> </head> <div class="container"> <div class="row masonry-container"> <div class="col-xs-6 col-sm-3 col-md-3 item"> <div class="thumbnail"> <img src="http://lorempixel.com/150/200/abstract" alt=""> <div class="caption"> <h3>Thumbnail label</h3> <p>Lorem ipsumLorem ipsum dolosit amet, consectetur adipisicing eli dolor sit amet, consectetur adipisicing elit. </p> </div> </div> </div><!--/.item --> <div class="col-xs-6 col-sm-3 col-md-3 item"> <div class="thumbnail"> <img src="http://lorempixel.com/150/200/abstract" alt=""> <div class="caption"> <h3>Thumbnail label</h3> <p>Lorem ipsumLorem ipdolor sit amet, consectetur adipisicing eli dolor sit amet, consectetur adipisicing elit. </p> </div> </div> </div><!--/.item --> <div class="col-xs-6 col-sm-3 col-md-3 item"> <div class="thumbnail"> <img src="http://lorempixel.com/150/200/abstract" alt=""> <div class="caption"> <h3>Thumbnail label</h3> <p>Lorem ipsumLorem ipsum dolor sit amet, consectetur adipisicing eliLorem ipsum dolor sit amet, consectetur adipisicing eliLorem ipsum dolor sit amet, consectetur adipisicing eli dolor sit amet, consectetur adipisicing elit. </p> </div> </div> </div><!--/.item --> <div class="col-xs-6 col-sm-3 col-md-3 item"> <div class="thumbnail"> <img src="http://lorempixel.com/150/200/abstract" alt=""> <div class="caption"> <h3>Thumbnail label</h3> <p>Lorem ipsumLorem ipsum dolor sit amet, consectetur adipisicing eliLorem ipsum dolor sit amet, consectetur adipisicing eliLorem ipsum dolor sit amet, consectetur adipisicing eli dolor sit amet, consectetur adipisicing elit. </p> </div> </div> </div><!--/.item --> <div class="col-xs-6 col-sm-3 col-md-3 item"> <div class="thumbnail"> <img src="http://lorempixel.com/150/200/abstract" alt=""> <div class="caption"> <h3>Thumbnail label</h3> <p>Lorem ipsumLorem ipsum dolor ctetur adipisicing eli dolor sit amet, consectetur adipisicing elit. </p> </div> </div> </div><!--/.item --> <div class="col-xs-6 col-sm-3 col-md-3 item"> <div class="thumbnail"> <img src="http://lorempixel.com/150/200/abstract" alt=""> <div class="caption"> <h3>Thumbnail label</h3> <p>Lorem ipsumLorem ipdolor sit amet, consectetur adipisicing eli dolor sit amet, consectetur adipisicing elit. </p> </div> </div> </div><!--/.item --> <div class="col-xs-6 col-sm-3 col-md-3 item"> <div class="thumbnail"> <img src="http://lorempixel.com/150/200/abstract" alt=""> <div class="caption"> <h3>Thumbnail label</h3> <p>Lorem ipsumLorem ipsum dolor sit amet, consectetur adipisicing eliLorem ipsum dolor sit amet, consectetur adipisicing eliLorem ipsum dolor sit amet, consectetur adipisicing eli dolor sit amet, consectetur adipisicing elit. </p> </div> </div> </div><!--/.item --> <div class="col-xs-6 col-sm-3 col-md-3 item"> <div class="thumbnail"> <img src="http://lorempixel.com/150/200/abstract" alt=""> <div class="caption"> <h3>Thumbnail label</h3> <p>Lorem ipsumLorem ipsum dolor sit amet, consectetur adipisicing eliLorem ipsum dolor sit amet, consectetur adipisicing eliLorem ipsum dolor sit amet, consectetur adipisicing eli dolor sit amet, consectetur adipisicing elit. </p> </div> </div> </div><!--/.item --> <div class="col-xs-6 col-sm-3 col-md-3 item"> <div class="thumbnail"> <img src="http://lorempixel.com/150/200/abstract" alt=""> <div class="caption"> <h3>Thumbnail label</h3> <p>Lorem ipsumLorem ipsum dolor ctetur adipisicing eli dolor sit amet, consectetur adipisicing elit. </p> </div> </div> </div><!--/.item --> </div> <!--/.masonry-container --> </div><!--/.tab-panel --> <style type="text/css"> body { padding-top: 50px; } .main-container { padding: 10px 15px; } .p { text-align: center; } </style> <script type="text/javascript"> /* Demo Scripts for Making Twitter Bootstrap 3 Tab Play Nicely With The Masonry Library * on SitePoint by Maria Antonietta Perna */ //Initialize Masonry inside Bootstrap 3 Tab component (function( $ ) { var $container = $('.masonry-container'); $container.imagesLoaded( function () { $container.masonry({ columnWidth: '.item', itemSelector: '.item' }); }); //Reinitialize masonry inside each panel after the relative tab link is clicked - $('a[data-toggle=tab]').each(function () { var $this = $(this); $this.on('shown.bs.tab', function () { $container.imagesLoaded( function () { $container.masonry({ columnWidth: '.item', itemSelector: '.item' }); }); }); //end shown }); //end each })(jQuery); </script> = "sha512-K1qjQ + NcF2TYO / eI3M6v8EiNYZfA95pQumfvcVrTHtwQVDG + aHRqLi / ETn2uB + 1JqwYqVG3LIvdm9lj6imS / pQ ==" <head> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script type="text/javascript" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/123941/masonry.js"></script> <script type="text/javascript" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/123941/imagesLoaded.js"></script> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous"> <!-- Optional theme --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css" integrity="sha384-aUGj/X2zp5rLCbBxumKTCw2Z50WgIr1vs/PFN4praOTvYXWlVyh2UtNUU0KAUhAX" crossorigin="anonymous"> <!-- Latest compiled and minified JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" integrity="sha512-K1qjQ+NcF2TYO/eI3M6v8EiNYZfA95pQumfvcVrTHtwQVDG+aHRqLi/ETn2uB+1JqwYqVG3LIvdm9lj6imS/pQ==" crossorigin="anonymous"></script> </head> <div class="container"> <div class="row masonry-container"> <div class="col-xs-6 col-sm-3 col-md-3 item"> <div class="thumbnail"> <img src="http://lorempixel.com/150/200/abstract" alt=""> <div class="caption"> <h3>Thumbnail label</h3> <p>Lorem ipsumLorem ipsum dolosit amet, consectetur adipisicing eli dolor sit amet, consectetur adipisicing elit. </p> </div> </div> </div><!--/.item --> <div class="col-xs-6 col-sm-3 col-md-3 item"> <div class="thumbnail"> <img src="http://lorempixel.com/150/200/abstract" alt=""> <div class="caption"> <h3>Thumbnail label</h3> <p>Lorem ipsumLorem ipdolor sit amet, consectetur adipisicing eli dolor sit amet, consectetur adipisicing elit. </p> </div> </div> </div><!--/.item --> <div class="col-xs-6 col-sm-3 col-md-3 item"> <div class="thumbnail"> <img src="http://lorempixel.com/150/200/abstract" alt=""> <div class="caption"> <h3>Thumbnail label</h3> <p>Lorem ipsumLorem ipsum dolor sit amet, consectetur adipisicing eliLorem ipsum dolor sit amet, consectetur adipisicing eliLorem ipsum dolor sit amet, consectetur adipisicing eli dolor sit amet, consectetur adipisicing elit. </p> </div> </div> </div><!--/.item --> <div class="col-xs-6 col-sm-3 col-md-3 item"> <div class="thumbnail"> <img src="http://lorempixel.com/150/200/abstract" alt=""> <div class="caption"> <h3>Thumbnail label</h3> <p>Lorem ipsumLorem ipsum dolor sit amet, consectetur adipisicing eliLorem ipsum dolor sit amet, consectetur adipisicing eliLorem ipsum dolor sit amet, consectetur adipisicing eli dolor sit amet, consectetur adipisicing elit. </p> </div> </div> </div><!--/.item --> <div class="col-xs-6 col-sm-3 col-md-3 item"> <div class="thumbnail"> <img src="http://lorempixel.com/150/200/abstract" alt=""> <div class="caption"> <h3>Thumbnail label</h3> <p>Lorem ipsumLorem ipsum dolor ctetur adipisicing eli dolor sit amet, consectetur adipisicing elit. </p> </div> </div> </div><!--/.item --> <div class="col-xs-6 col-sm-3 col-md-3 item"> <div class="thumbnail"> <img src="http://lorempixel.com/150/200/abstract" alt=""> <div class="caption"> <h3>Thumbnail label</h3> <p>Lorem ipsumLorem ipdolor sit amet, consectetur adipisicing eli dolor sit amet, consectetur adipisicing elit. </p> </div> </div> </div><!--/.item --> <div class="col-xs-6 col-sm-3 col-md-3 item"> <div class="thumbnail"> <img src="http://lorempixel.com/150/200/abstract" alt=""> <div class="caption"> <h3>Thumbnail label</h3> <p>Lorem ipsumLorem ipsum dolor sit amet, consectetur adipisicing eliLorem ipsum dolor sit amet, consectetur adipisicing eliLorem ipsum dolor sit amet, consectetur adipisicing eli dolor sit amet, consectetur adipisicing elit. </p> </div> </div> </div><!--/.item --> <div class="col-xs-6 col-sm-3 col-md-3 item"> <div class="thumbnail"> <img src="http://lorempixel.com/150/200/abstract" alt=""> <div class="caption"> <h3>Thumbnail label</h3> <p>Lorem ipsumLorem ipsum dolor sit amet, consectetur adipisicing eliLorem ipsum dolor sit amet, consectetur adipisicing eliLorem ipsum dolor sit amet, consectetur adipisicing eli dolor sit amet, consectetur adipisicing elit. </p> </div> </div> </div><!--/.item --> <div class="col-xs-6 col-sm-3 col-md-3 item"> <div class="thumbnail"> <img src="http://lorempixel.com/150/200/abstract" alt=""> <div class="caption"> <h3>Thumbnail label</h3> <p>Lorem ipsumLorem ipsum dolor ctetur adipisicing eli dolor sit amet, consectetur adipisicing elit. </p> </div> </div> </div><!--/.item --> </div> <!--/.masonry-container --> </div><!--/.tab-panel --> <style type="text/css"> body { padding-top: 50px; } .main-container { padding: 10px 15px; } .p { text-align: center; } </style> <script type="text/javascript"> /* Demo Scripts for Making Twitter Bootstrap 3 Tab Play Nicely With The Masonry Library * on SitePoint by Maria Antonietta Perna */ //Initialize Masonry inside Bootstrap 3 Tab component (function( $ ) { var $container = $('.masonry-container'); $container.imagesLoaded( function () { $container.masonry({ columnWidth: '.item', itemSelector: '.item' }); }); //Reinitialize masonry inside each panel after the relative tab link is clicked - $('a[data-toggle=tab]').each(function () { var $this = $(this); $this.on('shown.bs.tab', function () { $container.imagesLoaded( function () { $container.masonry({ columnWidth: '.item', itemSelector: '.item' }); }); }); //end shown }); //end each })(jQuery); </script>
+7
Oct 24 '15 at 17:02
source share

We have stuff called: bootstrap-waterfall:
http://mystist.imtqy.com/bootstrap-waterfall/

But in fact, this plugin does not need a bootstrap as its dependencies. It depends on whether you want to use bootstrap as your markup contacts or just on their own.

+3
May 29 '15 at 2:49
source share

For anyone who doesn’t want you to encounter cross browser compatibility, here is a PHP solution. Assuming you have data in an array,

 <?php $iColumns = 4;?> <?php for($i=0; $i < $iColumns; ++$i):?> <div class="span3"> <?php $j=$i; while( isset( $aData[$j] ) ): $oItem = $aData[$j] ?> <div class="thumbnail" style="margin-top:10px;"> <a href=""> <img src="" alt=""/> </a> <h3>title</h3> <p>caption</p> </div> <?php $j=$j+$iColumns; endwhile;?> </div> <?php endfor;?>
-twenty
Mar 11 '13 at 13:04 on
source share


More articles:


All Articles