Resources to Building Pinterest Layout with Bootstrap

Pinterest brings a fresh new layout. The developers want to imitate it in various ways, such as by using the bootstrap and javascript. Thus, many released wordpress themes or themes with a layout similar to HTML pinterest. Actually, this layout suitable for a website with lots of pictures, displays a random image with different sizes and trimmed with javascript.
The most popular Javascript is masonry, unfortunately there is no developer who is able to combine perfectly masonry and bootstrapping. Because, I am also looking for him.

Well, although it can not be incorporated perfectly, at least we can still use the bootstrap with javascript (jquery plugin) to create layouts pinterest. Below I detail how to make pinterest style layout with additional bootstrap and javascript.

1. Mansory CSS with Bootstrap

*, *:before, *:after {box-sizing:  border-box !important;}


.row {
 -moz-column-width: 18em;
 -webkit-column-width: 18em;
 -moz-column-gap: 1em;
 -webkit-column-gap:1em; 
  
}

.item {
 display: inline-block;
 padding:  .25rem;
 width:  100%; 
}

.well {
 position:relative;
 display: block;
}

<div class="container">
  <h1>Masonry CSS with Bootstrap</h1>
<div class="row">
    <div class="item">
      <div class="well"> 
        1 blah blah blah
      </div>
    </div>
 	<div class="item">
        <div class="well"> 
        2 blah blah blah blah blah blah blah blah blah blah blah blahblah blah blah blah blah blah
        </div>
    </div>
    <div class="item">
        <div class="well"> 
        3 blah blah blah blah blah blah blah blah h
        </div>
    </div>
    <div class="item">
        <div class="well">
        blah blah blah blah 
        </div>
    </div>
    <div class="item">
        <div class="well"> 
          blah blah blah. The container inside the item must be position:relative
        </div>
    </div>
 	<div class="item">
        <div class="well"> 
        blah blah blah blah blah blah blah blah blah blah blah blahblah blah blah blah blah blah
        </div>
    </div>
    <div class="item">
        <div class="well">
        blah blah blah blah blah blah blah blah h
        </div>
    </div>
    <div class="item">
        <div class="well"> 
        blah blah blah blah
        </div>
    </div>
    <div class="item">
        <div class="well"> 
        blah blah blah blah blah blah blah blah blah blah blah blah
        </div>
    </div>
    <div class="item">
        <div class="well"> 
          blah blah blah. The container inside the item must be position:relative
        </div>
    </div>
</div>
</div>

Source

2. Pinstrap – a HTML Template

3. Bootstrap Mansory Template

Download

4. Simple jQuery Plugin to Create Pinterest Layout

I am use this jquery plugin to build jabirah, its easy to use, fast and client side calculation

Download

5. Waterfall.js

Its best pinterest layout with javascript, because is combine with infinite scroll. I am prefer to use it, but when deal with infinite scroll, it very hard to implement with my cakePHP.

Download

Recomended this one.

Gridsby is premium bootstrap theme with pinterest style. If you dont have time to design, you can use it. I am very recomended this stuff.

Fully Responsive

Built with a 100% fluid grid system, Fit Coach gives your visitors the ability to browse your site easily on any device. The layout makes booking classes on tablets and mobile devices a breeze.

Download here