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

Question

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

What's wrong with Masonry or her bigger sister Isotope? People are implementing it easily http://mpezzi.github.com/bootstrap_isotope/ or http://www.maurizioconventi.com/2012/06/19/responsive-example-integrating-twitter-bootstrap-and-jquery-masonry/ or http://pknopf.com/blog/jquery-isotope-with-responsive-twitter-bootstrap — Systembolaget, Sep 24 '12 at 23:00
Important to note: any pure CSS solution (as of 2016) will lay out items from top to bottom, not left to right. The Pinterest layout shows newest items at the top, i.e. left to right, which cannot be done with pure CSS. — Mark E. Haase, Dec 23 '16 at 06:21

score 67 · Accepted Answer · edited Mar 07 '17 at 12:09

67

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.

edited Mar 07 '17 at 12:09

RudolphTheCat

106
12

answered Jan 27 '13 at 20:41

Bernardo Siu

1,359
13
13

3

Uses javascript to achieve positioning, not bootstrap. – Christopher G Apr 27 '14 at 21:52

score 19 · Answer 2 · answered May 04 '14 at 07:28

19

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!

answered May 04 '14 at 07:28

Christopher G

499
4
7

A gorgeous solution. But one that's not cross browser compatible. – MastaBaba Jun 02 '14 at 01:46
What is solution for IE ? – marifrahman Mar 29 '16 at 01:46
This is an awe answer. +1 from me. – Kingshuk Deb May 04 '17 at 14:36
Works on Edge too – Cedric Ipkiss Oct 07 '17 at 12:56

Sabba Keynejad · Answer 3 · 2017-09-11T09:10:35.077

EDIT: This is now out of the box in boostrap 4 http://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.

<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>

You saved me in an online interview test. Super thank you! – Mina Soleimanzadeh May 23 '21 at 08:52 — Mina Soleimanzadeh, May 23 '21 at 08:52

score 10 · Answer 4 · answered Sep 24 '12 at 18:35

Yes, it is possible but with some limitations.

Principle

Each column is a div (or section depending upon the meaning of your layout)
Within each column each tile is also be a div, or img etc. depending upon your design.

Practice

To make the columns you can use the following various techniques:

float the columns
display: 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 (divs) in each column. Again, depending upon your design/layout you could replace the column-divs with uls, and have a list of tiles (lis). 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.

sounds pretty exhausting. After some research I think the JS Solution is the way to go... — Matt, Sep 25 '12 at 06:25
Although this solution is still not practicable because it still lacks browser support - even its more than a year since your answer - this was what I wanted to know, but no one's speaking of it. Really glad to know about flexible box api and css grids. Thanks for your answer. — Hamid Sarfraz, Jan 07 '14 at 14:22

Jeyara · Answer 5 · 2016-01-31T23:24:48.963

8

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.

edited Jan 31 '16 at 23:24

answered Dec 10 '14 at 04:37

Jeyara

2,198
1
23
26

score 5 · Answer 6 · answered Apr 17 '20 at 13:31

Since Bootstrap 4, the .card-columns class is available. Specifications in there documentation here. It makes a nice Pinterest-like grid.

<div class="card-columns">
 <div class="card" id="card1"></div>
 <div class="card" id="card2"></div>
 <div class="card" id="card3"></div>
 <div class="card" id="card4"></div>
 <div class="card" id="card..."></div>
</div>

About the number of columns, though, I had trouble adapting it to different screen sizes. I finally managed to do it with :

@media (max-width: 575.98px){ 
    .card-columns {
        column-count: 1; }
}
@media (min-width: 576px){
    .card-columns {
        column-count: 2; }
}
@media (min-width: 768px){
    .card-columns {
        column-count: 3; }
}
@media (min-width: 992px){
    .card-columns {
        column-count: 4; }
}
@media (min-width: 1200px){
    .card-columns {
        column-count: 4; }
}

Liber · Answer 7 · 2015-06-01T13:04:46.573

4

There we have a stuff named: 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.

edited Jun 01 '15 at 13:04

answered May 29 '15 at 02:49

Liber

422
4
12

score 0 · Answer 8 · answered Jul 03 '18 at 15:49

<div class="card-deck">
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <div class="card-block">
      <h4 class="card-title">Card title</h4>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Last updated 3 mins ago</small>
    </div>
  </div>
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <div class="card-block">
      <h4 class="card-title">Card title</h4>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Last updated 3 mins ago</small>
    </div>
  </div>
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <div class="card-block">
      <h4 class="card-title">Card title</h4>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Last updated 3 mins ago</small>
    </div>
  </div>
</div>

score -24 · Answer 9 · answered Mar 11 '13 at 13:04

-24

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,

<?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;?>

answered Mar 11 '13 at 13:04

Rakesh

1,336
2
11
13

2

This contradicts the purpose of using a cross-browser tool like Bootstrap, and the user didn't advise whether he had access to server-side scripting. – sws Jul 18 '14 at 02:52
Well, i dont see how my solution contradicts the purpose of bootstrap. I use bootstrap column class in it. i have used this same code for one of my projects and it works just fine. when you ask a question about implementing a free framework like bootstrap, it is "understood" that the person has got server access in 99% of the cases – Rakesh Jul 19 '14 at 06:54

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

9 Answers9

Principle

Practice

Limitations

Work-Arounds

Linked

Related