Packery Tiles with Bootstrap

index.html

 <section class="packery">
            <div class="container-fluid no-padding">
                <div class="row no-padding">
                    <div class="box col-1">
                        Inspired by: http://stackoverflow.com/questions/23763092/packery-positionering-with-bootstrap
                    </div>
                     <div class="box col-2">
                        jhjhj
                    </div>
                    <div class="box col-2by3">
                        klkklkl
                    </div>
                    <div class="box col-3">
                        uyuyuyu
                    </div>
                    
                    <div class="box col-3by3">
                        nmnmnmn
                    </div>
                    <div class="box col-4">
                        vbvbvb
                    </div>
                    
                </div>
            </div>
        </section>

Packery Tiles with Bootstrap.markdown

Packery Tiles with Bootstrap

Packery layout with bootstrap grid

A Pen by amitabha ghosh on CodePen.

License.

style.css

/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : Aug 28, 2015, 11:46:59 PM
    Author     : ADITYAM GHOSH
*/

html, body{
    width:100%;
    height:100%;
}
*{
    position: relative;
}

.packery{
    width: 100%;
    min-height: 400px;
}

.no-padding{
    padding: 0 !important;
}

.padding-left-0{
    padding-left: 0 !important;
}

.padding-right-0{
    padding-left: 0 !important;
}

.packery .row{
    margin-left:0;
    margin-right: 0;
}
.box{
    
    overflow: hidden;
    display: block;
    
}

/*div[class*="col-"]{
    float:left;
    min-height:30px;
   
}*/

.box{
    float:left;
    min-height:150px;
   
}
.box.col-1{
    background: #FFEA0E;
    width:40%;
    width:calc(0.40 * 100%);
    width:-webkit-calc(0.40 * 100%);
    
}

.box.col-2{
    background:#0D72FF;
     width:30%;
    width:calc(0.30 * 100%);
    width:-webkit-calc(0.30 * 100%);
}

.box.col-2by3{
    background:#00E8C9;
     width:30%;
    width:calc(0.30 * 100%);
    width:-webkit-calc(0.30 * 100%);
}

.box.col-3{
    background:#FF0000;
     width:30%;
    width:calc(0.30 * 100%);
    width:-webkit-calc(0.30 * 100%);
}

.box.col-3by3{
    background:#FFD53D;
     width:30%;
    width:calc(0.30 * 100%);
    width:-webkit-calc(0.30 * 100%);
}
.box.col-4{
    background:#860CE8;
     width:40%;
    width:calc(0.40 * 100%);
    width:-webkit-calc(0.40 * 100%);
}

styles

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />