Create Bootstrap Portfolio Gallery With Filtering Category

Portfolio Gallery With Filtering Category

Portfolio Gallery With Filtering Category

In this tutorial, we’ll learn to create a Bootstrap Portfolio Gallery with a filtering category. These days, most business websites have a portfolio part/webpage, so today we’ll learn to create a portfolio on a category basis.

I’ve also explained this by an example step by step of this tutorial, you’ll be able to check out the demo and download the full source code of Bootstrap Portfolio Gallery and free to make modifications as per your requirement.

Adding the Bootstrap, prettyPhoto and Google font library

To create a Bootstrap Portfolio Gallery, however, be sure to have included the bootstrap JS & CSS files in the head tag of your gallery page. Copy the below code and add it to your portfolio gallery page.

You can also download the library Js and CSS from the Bootstrap official website

Bootstrap Portfolio Gallery

The HTML Code

Creating the Tab Navigation for filtering

First of all, now we have the HTML markup for Tab navigation. It is a DIV tag (id=”myDIV” ) with a data filter. data-filter is included as a result of MixItUp wants it for its filtering. It is updated to evolve to the new MixItUp formatting. Classes are specified in data-filter to be in step with jQuery filter();

Now add below HTML code to show on the portfolio gallery web page. You can also change the HTML code as your requirement.

The Javascript code

Add the below jQuery script in the Bootstrap Portfolio Gallery footer section. Below jQuery code will filter your Portfolio Gallery on a category basis.

The CSS Code

Add the below CSS code in the head section OR you can also create a separate style.css file and add the below CSS code. It’s also possible to customize the below CSS code to match with the template color combination.

Bootstrap Portfolio Gallery With Filtering Category


These days, designers have a tendency to cut down the clutters and keep everything easy. With this tutorial, we created a Bootstrap Portfolio Gallery With Filtering Category. With all kinds of plugins available at present, we can simply produce the effect we want by combining different javascript plugins.

Hopefully, this update will solve quite a lot of questions you have. Drop a comment in case you have any questions. Enjoy!

Download full Source code