29th April 2014 – I updated the code below and I think that now it really is as good as this can possibly get.
Perfect result!

I love both Isotope and Twitter Bootstrap framework, I think they’re great tools for developers & web designers alike.
However, due to the nature of TB’s fluid structure (with widths in % rather than px) and Isotope being originally developed way before this kind of layout structures were popular…. they don’t work nicely together out of the box.

Desandro (who, ironically, is a designer at Twitter), Isotope‘s developer, has recently released a beta for Isotope v.2 and the direction is definitely going towards making the library more accomodating of responsive and fluid layouts.
That said, I still had some trouble to make a full width website work as I wished, while implementing both, but I finally managed to make everything work beautifully.

isotope-8

Also, I am using Infinite Scroll (developed by Paul Irish), imagesLoaded (also developed by Desandro) and WP Imager (developed by me), to accomplish 3 more objectives:

– resize and cache images inside items
– make an endless list of items without needing to click on pagination
– make sure all images inside the items load before firing Isotope (mostly to avoid overlapping of partially formed items, while images are still loading).

All of this, on a WordPress site.

[mt]

So here I’ll show you how they all work together.

Download and setup in your site, the (latest versions of) necessary scripts:

Isotope v2 beta .
Twitter Bootstrap (or use their CDN)
Infinite Scroll
imagesLoaded
WP Imager (keep in mind that this only works on WordPress)

I have removed pretty much all WordPress related code, so feel free to adapt it to whatever you need it for.

Template file

<div id="iso">
<div class="row">
<div class="post col-xs-12 col-sm-6 col-md-3 col-lg-3">
<div class="post_img"><img src="#"></div>
<div class="content">
<h2><a href="#">Item Title</a></h2>
</div>
</div>
</div>
<div class="pagination">
<a href="#/page/2/">Next</a>
</div>	
</div>

CSS 

#iso {
margin: 0 auto;
width: 100%;
}
/* Browser Support of ':first-of-type' pseudo-class
Chrome 	Safari 	Firefox  Opera 	IE 	Android   iOS
Works 	 3.2+ 	 Works 	  9.5+ 	9+ 	 Works 	 Works
*/
#iso .row:first-of-type {
margin: 0;
}
.post {
margin: 10px 0;
max-width: 100%;
padding: 0;
}
.post .content {
padding: 20px;
}
/* 
* PAGINATION
*/
.pagination {
display: none;
visibility: hidden;
}
/* 
* MEDIA QUERIES
*/
@media (min-width: 768px) and (max-width: 980px) {
#iso .col-md-3, #iso .col-lg-3 {
width: 300px;
}
}
@media (min-width: 980px) and (max-width: 1300px) {
#iso .col-md-3, #iso .col-lg-3 {
width: 350px;
}
}
@media (min-width: 1300px) {
#iso .col-md-3, #iso .col-lg-3 {
width: 400px;
}
}

JS

<script>
$(document).ready(function() {
var $container = $('#iso');
// Fire Isotope only when images are loaded
$container.imagesLoaded(function(){
$container.isotope({
itemSelector : '.post',
masonry: {
isFitWidth: true,
gutter: 20
}
});
});
// Infinite Scroll
$('#iso').infinitescroll({
navSelector  : 'div.pagination', 
nextSelector : 'div.pagination a:first', 
itemSelector : '.post',
bufferPx     : 200,
loading: {
finishedMsg: 'We\'re done here.',
//img: +templateUrl+'ajax-loader.gif'
}
},
// Infinite Scroll Callback
function( newElements ) {
var $newElems = jQuery( newElements ).hide(); 
$newElems.imagesLoaded(function(){
$newElems.fadeIn();
$container.isotope( 'appended', $newElems );
});
});
});
</script>
<!--[if lte IE 8]>
<script>
$(document).ready(function() {
// IE8 compatibility of pseudo-class
$('#iso .row').first().css({margin:'0'});
});
</script>
<![endif]-->

[mt]

There’s probably more solutions on how to achieve all of this, however after I researched extensively, this was the only solution that did the trick for me.
So, take all of this and adapt it to your needs!

Have a project in mind?
Let's build it right.

Tell us about your goals. We will take care of the rest.

or email info@shambix.com

Name
We work with flexible budgets, and welcome all kinds of projects, small to massive. It helps us tailor the best solution to your specific needs.