Bootstrap Test

Bootstrap test setup. Responsive with images.

by aaronheld

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/css/bootstrap-combined.min.css">
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/js/bootstrap.min.js"></script>
<script src="https://raw.github.com/desandro/masonry/master/jquery.masonry.min.js"></script>
<div class="container">

<div id="posts" class="row">
    
        <div class="post span3">
        
        </div>
        <div class="post span3 tall">
        
        </div>
        <div class="post span6">
        
        </div>
        <div class="post span6 tall">
        
        </div>
        <div class="post span3 tall">
        
        </div>
        <div class="post span3">
        
        </div>
        <div class="post span6">
        
        </div>
        <div class="post span6">
        
        </div>
        <div class="post span3">
        
        </div>
        <div class="post span6 tall">
        
        </div>
        <div class="post span6">
        
        </div>
        <div class="post span3">
        
        </div>        
        
    </div>

</div>

CSS

#posts .post { height: 100px; background: cyan; margin-bottom: 20px; }
#posts .tall { height: 200px; }

JavaScript

$(document).ready(function () {
   
    $("#posts").masonry({
        itemSelector: '.post',
        isAnimated: true,
        columnWidth: function( containerWidth ) {
        
            var width = $(window).width();
            var col = 300;
            

            if(width < 1200 && width >= 980) {
                col = 240;
            }
            else if(width < 980 && width >= 768) {
                col = 186;
            }
        
            return col;
          }
    });
    
});