Filterable portfolio with Shuffle.JS and Bootstrap 3

In this lesson I’ll show you how to build a basic responsive and filterable portfolio powered by Bootstrap 3 and Shuffle.JS.
Shuffle.JS is a free alternative to the popular Isotope plugin.

Final Result:

Our final portfolio
Our final portfolio

Download source files View Demo

Resources used

1. Download Bootstrap 3

Head to Bootstrap 3 and grab a copy. We’ll be using the grid system and a few list styles and paragraph classes.
Download and extract the archive in the folder project.
You’ll now have 3 folders: css, fonts, js. In the css folder add a custom.css file and add custom.js file in the js folder.

Project folder structure
Project folder structure

2. Bootstrap template and Shuffle.js plugin

Create an index.html file and copy & paste the content from Bootstrap’s Basic Template.
We also have to download the Shuffle.js plugin. After you extract the archive, go to the dist folder and copy the jquery.shuffle.modernizr.min to our project js folder.

Before we start coding, we just have to download one more javascript dependecy – jQuery throttle / debounce. Grab the minified file and paste it in our project’s js folder.
If you want, you can combine the minified jQuery throttle / debounce with the minfied shuffle.js and only use one file.

Now we have to add links to the custom.css, custom.js and shuffle.js. We’ll add the css in the head and the js script in the footer.

3. The Filter menu

Right bellow the body, add an h1 heading. To center align the text you can use Bootstrap’s special css class: text-center.

Now it’s time to create the Portfolio section. We need a section element will contain the filter menu and the grid, container div and row div – part of the Bootstrap 3 grid, our filter menu is stored in an unordered list – ul and 4 list items (li) that will hold our menu options.

If you’re using Emmet plugin for your favorite code editor you can easily generate this by expanding the following code with the TAB key or CTRL+E:

Quickly generate the code with Emmet
Quickly generate the code with Emmet

The list-inline class used in our unordered list is a Bootstrap 3 class that removes the list styling and displays the list items inline. Text-center is another Bootstrap class used to center align the text in the parent container.

Now we have to add a data-group to the links in our filter menu. Data-groups will act as a category, enabling us to filter our portfolio.

4. The Portfolio items and grid

We have to display a list of images that represent the portfolio items. This means that we need an unordered list that will hold our list items.
One list item will have a data-groups that will allow our plug-in to compare the filter menu item with the portfolio item and then filter it. Inside a list item we’ll have a figure element that will hold our image.

A critical element that will allow us to filter our content is the sizer. The sizer will be used by the javascript plugin to find out the dimensions of our element. To add the sizer simply add another list item with the Bootstrap columns that you want to use in your portfolio items design.

5. Adding more items to our portfolio

To easily add pictures, without having to edit them, I used 2 awesome image placeholder services that provide us with free images: Lorempixel and Lorempicsum.
To make sure that our images are responsive, don’t forget to add the Bootstrap 3 class img-responsive to our images.

Here is the final portfolio section, with all the elements added:

6. Adding the CSS

Now we have to style the grid elements. Since we are using the Bootstrap grid system, we don’t need to add special sizing to the items.

7. Adding JavaScript

Now that we finished the HTML and CSS part, it’s time to add functionality to our portfolio. We’ll base our code on the example code provided by the Shuffle.JS plugin in the demos folder.

In the custom.css we’ll begin by initializing the plugin:

Next we have to identify the target items: the grid, the filter menu and the item size.

Here is the final JavaScript code in the custom.js:

The setupFilters function allows us to filter the portfolio by identifying the active filter menu item.

8. Additional HTML & CSS

For easy reference, I added the resources used in this tutorial in the footer. I placed the content inside 3 divs with col-md-4 class.

With Emmet you can quickly generate the HTML code by expanding this line of code: footer>.container>.row>.col-md-4.column*3>h4

Quickly generate footer code with Emmet
Quickly generate footer code with Emmet


You’ve completed this tutorial and learned how to easily create and set-up a filterable grid powered by Bootstrap 3 and Shuffle.JS.
Thanks for reading!

Tags: , , ,

Gabriel Neagu

Gabriel Neagu

I'm a developer from Bucharest, Romania passionate about design and clean code. In my free time I enjoy playing guitar.

Follow Gabriel:

Related Articles


  1. Hi thank for your tutorial but i don’t understand what you are doing in this part of code
    proxyImage = new Image();
    $( proxyImage ).on(‘load’, function() {

    proxyImage.src = this.src;
    I’m not an expert in jquery but what i understand is that you’re looking if some image are on load and you stop this load with $(this).off(‘load’); that means that some image won’t be load
    Why are you doing that ?

  2. hey,

    is there any way of setting the filter load default? so instead of it loading up with all the images, setting it so the page loads just the futurama pics?


  3. Have you ever thought about creating an e-book or guest authoring
    on other blogs? I have a blog centered on the same topics you discuss and would love to have you share some stories/information. I know my viewers would value
    your work. If you’re even remotely interested, feel free to shoot me an e-mail.

  4. Hello there! Quick question that’s entirely off topic.
    Do you know how to make your site mobile friendly? My web site looks weird when browsing from my iphone 4.

    I’m trying to find a theme or plugin that might be able
    to correct this issue. If you have any recommendations, please
    share. Thanks!

  5. I have to thank you for the efforts you’ve put in writing this blog.
    I really hope to see the same high-grade blog posts from you in the future as well.
    In fact, your creative writing abilities has inspired me
    to get my own, personal blog now 😉

  6. Thanks for your article on Shuffle.js Very helpful.

    PS: By the way, in my early days I was a big fan of the Romanian company known as InterAkt. They created a collection of PHP 4 tools which I used to create my first Content Management System.

    InterAkt developed the tools for Macromedia Dreamweaver. Both Macromedia and InterAkt were acquired by Adobe, and like all good things acquired by Adobe, they both suffered. InterAkt’s products were dropped and Dreamweaver has also declined in marketshare. Who would use Dreamweaver these days ???

Leave a Reply

Your email address will not be published. Required fields are marked *