NiceSnippets.com
Bootstrap Portfolio Image Gallery Filter Using Filterable JS
We are giving you image gallery with categories button search. it's a bootstrap 4 portfolio gallery filter. this is jquery portfolio filter gallery design free with source code. responsive image gallery with filter. filter image gallery bootstrap 4.
We allows to free snippets of bootstrap portfolio gallery filter , you can download full code of jquery portfolio gallery with categories layout. Here in this post i will give you example of bootstrap image gallery filter snippet and you will get simple code of html, css and jquery. In filter image gallery jquery free download snippet i give you three tab with html, css and js, you can easily get code of filter image gallery using jquery layout.
<!-- https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_portfolio_gallery_filter -->
<!DOCTYPE HTML PUBLIC>
<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<title>Example of Interactive and Filterable Portfolio</title>
<link href="http://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="portfolio.css" type="text/css" media="screen">
<link href="https://fonts.googleapis.com/css?family=PT+Sans+Narrow" rel="stylesheet">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="//nicesnippets.com/demo/filterable.pack.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div class="container main-section">
<h2 class="hedding text-center m-0 mb-5"> Example of Interactive and Filterable Portfolio </h2>
<ul id="portfolio-filter" class="text-center">
<li><a href="#all" class="btn btn-dark text-white mb-3">All</a></li>
<li><a href="#sport" rel="sport" class="btn btn-dark text-white mb-3">Sport</a></li>
<li><a href="#flower" rel="flower" class="btn btn-dark text-white mb-3">Flower</a></li>
<li><a href="#nature" rel="nature" class="btn btn-dark text-white mb-3">Nature</a></li>
</ul>
<ul id="portfolio-list">
<li style="display: block;" class="sport"><img src="//nicesnippets.com/demo/f-sport1.jpg" alt="" class="border p-2">
<p class="badge badge-danger text-white mb-3"> Sport </p>
</li>
<li style="display: block;" class="sport"> <img src="//nicesnippets.com/demo/f-sport2.jpg" alt="" class="border p-2">
<p class="badge badge-danger text-white"> Sport </p>
</li>
<li style="display: block;" class="flower"><img src="//nicesnippets.com/demo/f-flower.jpeg" alt="" class="border p-2 mt-2">
<p class="badge badge-danger text-white"> Flower </p>
</li>
<li style="display: block;" class="flower"><img src="//nicesnippets.com/demo/f-flower2.jpeg" alt="" class="border p-2 mt-2">
<p class="badge badge-danger text-white"> Flower </p>
</li>
<li style="display: block;" class="nature"><img src="//nicesnippets.com/demo/f-nature1.jpg" alt="" class="border p-2 mt-3">
<p class="badge badge-danger text-white"> Nature </p>
</li>
<li style="display: block;" class="nature"> <img src="//nicesnippets.com/demo/f-nature2.jpeg" alt="" class="border p-2 mt-3">
<p class="badge badge-danger text-white"> Nature </p>
</li>
<li style="overflow: hidden; clear: both; height: 0px; position: relative; float: none; display: block;"></li>
</ul>
</div>
</div>
</div>
</body>
</html>
body {
background-color: #f5f5f5 !important;
font-family: 'PT Sans Narrow', sans-serif;
}
.main-section{
margin-top:120px;
}
.main-section .hedding{
margin:40px;
font-size:30px;
color:#000;
}
#portfolio-filter .btn{
width:120px;
/*background-color: #E45641; */
}
ul#portfolio-filter{
padding: 0px;
}
ul#portfolio-filter li{
display: inline;
margin:0px;
}
ul#portfolio-filter a {
margin-right: 0.5em;
padding: 0.5em 1em;
color: #AAA;
font-weight: bold;
text-decoration: none;
}
ul#portfolio-filter a:hover, ul#portfolio-filter a.current {
color: #888;
}
ul#portfolio-list{
margin: 36px 0 0 0;
padding: 0;
list-style: none;
}
ul#portfolio-list li{
width: 165px;
height: 160px;
display: block;
float: left;
margin-right: 18px;
margin-bottom:35px;
}
ul#portfolio-list li img{
width: 100%;
height: 100%;
}
ul#portfolio-list li p{
font-size:14px;
letter-spacing: 1px;
line-height:20px;
color:#E45641;
text-align: center;
font-weight:600;
margin-top: 10px;
text-shadow:0px 0px 18px #E45641;
}
