Filterable Portfolio

In this tutorial you’ll learn how to create a Bootstrap page where you can filter items. You can use it to create a filterable portfolio, a page where a user filters recipes, an online shop where customers filter products, etc.

Filterable portfolio

A Bootstrap page with filterable items usually consists of several thumbnails. Depending on the purpose of the site the thumbnail only contains an image (e.g. a creative portfolio) or a thumbnail with a heading and some text (e.g. recipes or products).

The page must also contain a list with categories to set as a filter.

To allow users to filter the items and see only those items that they are interested in we’ll make use of a jQuery plugin. There are 3 jQuery plugins that can filter items (that I know of):

  • Quicksand
  • Isotope
  • Mixitup

Currently there are issues with the first 2 plugins (which I’ll explain further on). Isotope doesn’t work well with Bootstrap (it messes up the layout). Quicksand doesn’t work with jQuery versions 1.9.0 and higher. But because there is a solution for the Quicksand issue I chose to use that plugin for this tutorial. I’ll also keep you posted if there is an update for either of these plugins that will solve its issue.

Discovered the Mixitup plugin later than the other two (and after publishing this tutorial). I have added the complete markup with Mixitup as an addition at the end of this tutorial.

The page that we’ll create will filter thumbnails with recipes:

Basic structure

As starting point I use a template as discussed in Bootstrap 3 template with a CDN.

We then add the basic HTML structure which looks like this:

We have an unordered list that will contain the list items to filter the thumbnails (starting in line 5). And a second unordered list that will contain the thumbnails (begins in line 11).

Filter menu

We replace ‘…’ in the first ul with this set of list items:

The data-values show the categories we can use for the thumbnails.


For the thumbnails with recipes we replace ‘…’ with this:

Besides the ‘thumbnail’ class (necessary for the Bootstrap styling) I inserted a class ‘recipes’. This class will later be used in our script. It’s better not to use the ‘thumbnail’ class in the script because then both Bootstrap and Quicksand will work with the same class and that can lead to erratic behavior.

We link each list item to our filter categories with a data-type (e.g. desert, antipasto). Each list item also gets a unique data-id (e.g. id-1, id-2, id-3, etc.).

The other elements in each list item will be familiar. Although I used images with a width of 375px they will actually display with a width of 242px. So you could use images with a width of 242px as well.

Libraries and script

If your template doesn’t already contain them you then need to add the jQuery and Bootstrap libraries (see lines 1 and 3 in the code below):

Lines 2 and 4 require explanations:

The Quicksand plugin (currently) only works with jQuery versions up till 1.8.3. The Quicksand plugin makes use of the property jQuery.browser (also written as $.browser). But this property was deprecated in version 1.9.0 of jQuery. For the plugin to work with higher versions of jQuery we added a link to the migrate script hosted on a CDN (see line 2).

In line 4 we add the script for the Quicksand plugin. Click on the download option on the Quicksand plugin website. This will open the script file. Right-click in the window with the code for the plugin and save the Quicksand file into the js folder (of your project folder). Add a script to link to the “jquery.quicksand.js” file (see line 4).

The Quicksand script

We now add a script that will invoke Quicksand. We insert the code shown below after the scripts discussed above and before the closing body tag:

This script first creates a jQuery object that contains a collection of all the thumbnails. It stores that collection in the variable “$itemsholder”.

That collection is then cloned (= duplicated) and stored in a second variable called “$itemsClone”.We then declare the variable “$filterClass”. We leave that variable value-less (with the use of the empty string). So that we can give it a value later on in the script.

When a user clicks on one of the filter-links the data-value attribute for that link is read. This value is then stored in our previously declared variable “$filterClass”.

If a user clicks on the link with data-value “all” that selection of (= all the) the cloned thumbnails is stored in a new variable named “$filters”.

Otherwise (Else) the script only stores those cloned thumbnails with a data-type that corresponds with the chosen data-value. The variable “$filters” will then contain a smaller selection of cloned thumbnails.

Now that the variable “$filters” contains a selection of cloned thumbnails the script invokes the quicksand method to display them.


As a final step we add the styling:

In a previous version of this tutorial I set the with of each thumbnail list item with the Bootstrap grid classes"col-xs-6 col-sm-6 col-md-3". But this can result in jumpy behavior for the thumbnails. Quicksand mentions on the website that it currently doesn’t handle sizes set with ’ems’. I discovered that this also means that it doesn’t work well with the Bootstrap grid classes because these are set in percentages. A better approach is to set width in pixels (see line 6). To get the same layout of the thumbnails as in Bootstrap we also need to use a left and right margin of 10px and a float: left.

And that’s it. Our page with a filter for recipes is now done.

Mixitup addition

As said above I discovered the Mixitup plugin after writing this tutorial. It basically does the same thing as the Quicksand plugin. For those of you interested in the markup for the Filterable Portfolio page with Mixitup I have included the code below:

Don’t forget to download the Mixitup plugin and insert it in your project folder



Adam - November 6, 2015 Reply

Hi, first of all great tutorial keep up the great work.
But theres any issue I encountered while trying to set up my portfolio, its also present in your demo. While the shuffling animation is in progress the containers width gets cut by 40 which causes the last image being shown in separated row. When the animation ends width gets back its original dimension and the image pops back to its place. Any idea on how to solve this issue?
One more funny thing, if you keep cliking “All” and any other filtering button while the animation is in progress it will keep shrinking the width.

Theo - November 7, 2015 Reply

Hi Adam,


The width of the container is set dynamically by the Quicksand plugin. So I cannot help you with this (that would be up to the author of the plugin).

Checked to see if the same issue occurs with the Mixitup plugin. No last image popping with this plugin. So I added the complete markup for the Filterable Portfolio as an addition at the end of the tutorial. Maybe this will work better for you.

Raquib - October 6, 2015 Reply

Thank you very much. Great tutorial!

Theo - October 6, 2015 Reply


Mark Potampa - March 5, 2015 Reply

Hi Theo,
I’ve setup a similar gallery that uses the same Quicksand script and bootstrap modals; I’m wondering if anyone has tried successfully modifying for multiple data-types, i.e. having a list item being able to be included in more than one category (data-value)? I keep hacking but no luck yet….good breakdown on the overview here, thanks!


Theo - March 6, 2015 Reply

Hi Mark,


Good point about the multiple data-types. Have you posted your question as an issue the Quicksand GitHub page ( )? Maybe the developer can provide an example or include this feature in the next version of the plugin.

Cheers, Theo

Mark Potampa - March 6, 2015 Reply

Hi Theo,

Yeah, that’s a great suggestion; going to do that now – was experimenting with the incorporation of isotope in conjuction with quicksand or even as a complete other option; just thinking that having that flexibility with data-types could always be useful. One other consideration though could be using classes to sort and filter. I’ll let you know what comes of this. Thanks again!


Adhir Pandit - March 10, 2014 Reply

WOW!!! Love it… thank you! :))

Theo - March 10, 2014 Reply


moisea - January 19, 2014 Reply

hi this is a fantastic and i like the design of this site. just to get back to this tutorial, i would like to ask if the are any other way to stop the the pages from jumping at the end of each filtered page selected and to have a smooth transition all the way instead.
Once again great tutorial.

Theo - January 19, 2014 Reply

Thanks Moisea for drawing my attention to this. The jumpy behavior has/had to do with the fact that Quicksand doesn’t work well with widths set in percentages. I solved this by not using the Bootstrap grid classes for the thumbnail list items but setting their widths in pixels instead (see the Styling section at the end of the tutorial).

Regards, Theo

Add your comment

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