Isotope + Twitter Bootstrap + Infinite Scroll + Fluid/Responsive layout

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.


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.

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
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



Media Temple Hosting

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!

Jany Martelli

Sono Consulente Digitale, Front-End Developer e WordPress Specialist.
Aiuto aziende, professionisti e startup a crescere con la tecnologia ed una digital strategy vincente, creando e coordinando team di designer & sviluppatori, pianificando progetti e strategie, sviluppando soluzioni complesse.