Hi friend, hope you are doing good. After this tutorial, you will learn how to create portfolio gallery with filtering category. Nowadays, most business websites have portfolio section/page, so today you will learn how to create a portfolio on the category basis.
I have also explained this by an example at the end of this tutorial, you can download the example portfolio template and free to make changes as per your requirement.
Let’s start to create bootstrap portfolio template but make sure you have included the bootstrap JS & CSS files before head tag closed. Copy below code and add it into your portfolio file.
1 2 3 | <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"/> <script src="//code.jquery.com/jquery-1.10.2.min.js"></script> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> |
Add below jQuery script in your file after the JS & CSS files included. Below jQuery code will filter your portfolio on the category basis.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <script type="text/javascript"> $(document).ready(function(){ $(".filter-button").click(function(){ var value = $(this).attr('data-filter'); if(value == "all") { //$('.filter').removeClass('hidden'); $('.filter').show('1000'); } else { // $('.filter[filter-item="'+value+'"]').removeClass('hidden'); // $(".filter").not('.filter[filter-item="'+value+'"]').addClass('hidden'); $(".filter").not('.'+value).hide('3000'); $('.filter').filter('.'+value).show('3000'); } }); }); </script> |
Add below CSS code after the JS file OR you can also create a separate style file and add below CSS code. You can also customize the below CSS code to match with template color combination.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 | .gallery-title { font-size: 36px; color: #42B32F; text-align: center; font-weight: 500; margin-bottom: 70px; } .gallery-title:after { content: ""; position: absolute; width: 7.5%; left: 46.5%; height: 45px; border-bottom: 1px solid #5e5e5e; } .filter-button { font-size: 18px; border: 1px solid #42B32F; border-radius: 5px; text-align: center; color: #42B32F; margin-bottom: 30px; } .filter-button:hover { font-size: 18px; border: 1px solid #42B32F; border-radius: 5px; text-align: center; color: #ffffff; background-color: #42B32F; } .filter-button.active { background-color: #42B32F; color: white; } .port-image { width: 100%; } .gallery_product { margin-bottom: 30px; } |
Now add below HTML code to display on the portfolio template page. You can change the below code as you want.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 | <div class="container"> <div class="row"> <div class="gallery col-lg-12 col-md-12 col-sm-12 col-xs-12"> <h1 class="gallery-title">Gallery</h1> </div> <div align="center"> <button class="btn btn-default filter-button active" data-filter="all">All</button> <button class="btn btn-default filter-button" data-filter="hdpe">HDPE Pipes</button> <button class="btn btn-default filter-button" data-filter="sprinkle">Sprinkle Pipes</button> <button class="btn btn-default filter-button" data-filter="spray">Spray Nozzle</button> <button class="btn btn-default filter-button" data-filter="irrigation">Irrigation Pipes</button> </div> <br /> <div class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter hdpe"> <img src="http://fakeimg.pl/365x365/" class="img-responsive"/> </div> <div class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter sprinkle"> <img src="http://fakeimg.pl/365x365/" class="img-responsive"/> </div> <div class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter hdpe"> <img src="http://fakeimg.pl/365x365/" class="img-responsive"/> </div> <div class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter irrigation"> <img src="http://fakeimg.pl/365x365/" class="img-responsive"/> </div> <div class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter spray"> <img src="http://fakeimg.pl/365x365/" class="img-responsive"/> </div> <div class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter irrigation"> <img src="http://fakeimg.pl/365x365/" class="img-responsive"/> </div> <div class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter spray"> <img src="http://fakeimg.pl/365x365/" class="img-responsive"/> </div> <div class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter irrigation"> <img src="http://fakeimg.pl/365x365/" class="img-responsive"/> </div> <div class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter irrigation"> <img src="http://fakeimg.pl/365x365/" class="img-responsive"/> </div> <div class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter hdpe"> <img src="http://fakeimg.pl/365x365/" class="img-responsive"/> </div> <div class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter spray"> <img src="http://fakeimg.pl/365x365/" class="img-responsive"/> </div> <div class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter sprinkle"> <img src="http://fakeimg.pl/365x365/" class="img-responsive"/> </div> </div> </div> |
If you like FreeWebMentor and you would like to contribute, you can write an article and mail your article to [email protected] Your article will appear on the FreeWebMentor main page and help other developers.
Article Tags: bootstrap portfolio examples, bootstrap portfolio template, bootstrap portfolio template free, bootstrap tutorials, free bootstrap portfolio templates, free bootstrap portfolio themes
