Resources to Building Pinterest Layout with Bootstrap

bootstrap-layout-pinterest

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

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

pinterest layout

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.

pinterest layout

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.

gridsby

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

 

One thought on “Resources to Building Pinterest Layout with Bootstrap

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.