Filter
Bootstrap Filter plugin
Note: We are transitioning MDB4 to a legacy version and focusing on developing MDB5.
While we'll continue to support for the transition period, we encourage you to migrate to
MDB5. We're offering a huge discount on MDB5 PRO to help with your transition,
enabling you to leverage the full potential of the latest version. You can find more information here.
upgrade with discount
MD Bootstrap Filter plugin is an extension perfect for introducing vistors to a number of images, which can be freely filtered depending on the category. Easy to use, setup and customize.
To start working with filter plugin see "Getting Started" tab on this page.
Basic example
.webp)
.webp)
.webp)
.webp)
.webp)
.webp)
.webp)
.webp)
.webp)
.webp)
.webp)
.webp)
.webp)
.webp)
.webp)
.webp)
<div class="filter filter-basic">
<div class="filter-nav">
<button class="btn btn-success active" data-filter="">All</button>
<button class="btn btn-primary" data-filter="nature">Nature</button>
<button class="btn btn-primary" data-filter="food">Food</button>
<button class="btn btn-primary" data-filter="architecture">Architecture</button>
</div>
<div class="filter-gallery">
<div class="item" data-category="nature">
<div class="item-content">
<img src="https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(30).webp" alt="image">
</div>
</div>
<div class="item" data-category="architecture">
<div class="item-content">
<img src="https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(1).webp" alt="image">
</div>
</div>
<div class="item" data-category="food">
<div class="item-content">
<img src="https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(42).webp" alt="image">
</div>
</div>
<div class="item" data-category="architecture">
<div class="item-content">
<img src="https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(2).webp" alt="image">
</div>
</div>
<div class="item" data-category="nature">
<div class="item-content">
<img src="https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(114).webp" alt="image">
</div>
</div>
<div class="item" data-category="architecture">
<div class="item-content">
<img src="https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(4).webp" alt="image">
</div>
</div>
<div class="item" data-category="architecture">
<div class="item-content">
<img src="https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(6).webp" alt="image">
</div>
</div>
<div class="item" data-category="nature">
<div class="item-content">
<img src="https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(115).webp" alt="image">
</div>
</div>
<div class="item" data-category="food">
<div class="item-content">
<img src="https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(44).webp" alt="image">
</div>
</div>
<div class="item" data-category="architecture">
<div class="item-content">
<img src="https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(5).webp" alt="image">
</div>
</div>
<div class="item" data-category="food">
<div class="item-content">
<img src="https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(45).webp" alt="image">
</div>
</div>
<div class="item" data-category="food">
<div class="item-content">
<img src="https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(46).webp" alt="image">
</div>
</div>
<div class="item" data-category="food">
<div class="item-content">
<img src="https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(47).webp" alt="image">
</div>
</div>
<div class="item" data-category="nature">
<div class="item-content">
<img src="https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(111).webp" alt="image">
</div>
</div>
<div class="item" data-category="architecture">
<div class="item-content">
<img src="https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(3).webp" alt="image">
</div>
</div>
<div class="item" data-category="nature">
<div class="item-content">
<img src="https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(112).webp" alt="image">
</div>
</div>
</div>
</div>
$('.filter-basic').mdbFilter();
For Safari browser please include Web Animations API on Your page.
<script src="https://cdnjs.cloudflare.com/ajax/libs/web-animations/2.3.1/web-animations.min.js"></script>
Draggable gallery
<div class="filter filter-draggable">
<div class="filter-nav">
<button class="btn btn-success active" data-filter="">All</button>
<button class="btn btn-primary" data-filter="nature">Nature</button>
<button class="btn btn-primary" data-filter="food">Food</button>
<button class="btn btn-primary" data-filter="architecture">Architecture</button>
</div>
<div class="filter-gallery">
<div class="item" data-category="nature">
<div class="item-content">
<img src="https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(30).webp" alt="image">
</div>
</div>
<div class="item" data-category="architecture">
<div class="item-content">
<img src="https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(1).webp" alt="image">
</div>
</div>
<div class="item" data-category="food">
<div class="item-content">
<img src="https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(42).webp" alt="image">
</div>
</div>
<div class="item" data-category="architecture">
<div class="item-content">
<img src="https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(2).webp" alt="image">
</div>
</div>
<div class="item" data-category="nature">
<div class="item-content">
<img src="https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(114).webp" alt="image">
</div>
</div>
<div class="item" data-category="architecture">
<div class="item-content">
<img src="https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(4).webp" alt="image">
</div>
</div>
<div class="item" data-category="architecture">
<div class="item-content">
<img src="https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(6).webp" alt="image">
</div>
</div>
<div class="item" data-category="nature">
<div class="item-content">
<img src="https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(115).webp" alt="image">
</div>
</div>
<div class="item" data-category="food">
<div class="item-content">
<img src="https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(44).webp" alt="image">
</div>
</div>
<div class="item" data-category="architecture">
<div class="item-content">
<img src="https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(5).webp" alt="image">
</div>
</div>
<div class="item" data-category="food">
<div class="item-content">
<img src="https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(45).webp" alt="image">
</div>
</div>
<div class="item" data-category="food">
<div class="item-content">
<img src="https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(46).webp" alt="image">
</div>
</div>
<div class="item" data-category="food">
<div class="item-content">
<img src="https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(47).webp" alt="image">
</div>
</div>
<div class="item" data-category="nature">
<div class="item-content">
<img src="https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(111).webp" alt="image">
</div>
</div>
<div class="item" data-category="architecture">
<div class="item-content">
<img src="https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(3).webp" alt="image">
</div>
</div>
<div class="item" data-category="nature">
<div class="item-content">
<img src="https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(112).webp" alt="image">
</div>
</div>
</div>
</div>
$('.filter-draggable').mdbFilter({
draggable: true
});
Draggable gallery with mixed content (filled gaps)
.webp)
.webp)
.webp)
<div class="filter filter-fillgaps">
<div class="filter-nav">
<button class="btn btn-success active" data-filter="">All</button>
<button class="btn btn-primary" data-filter="nature">Nature</button>
<button class="btn btn-primary" data-filter="food">Food</button>
<button class="btn btn-primary" data-filter="architecture">Architecture</button>
<button class="btn btn-primary" data-filter="people">People</button>
</div>
<div class="filter-gallery">
<div class="item" data-category="people">
<div class="item-content">
<img src="https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(60).webp" alt="image">
</div>
</div>
<div class="item" data-category="architecture">
<div class="item-content">
<img src="https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(1).webp" alt="image">
</div>
</div>
<div class="item" data-category="nature">
<div class="item-content">
<img src="https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(30).webp" alt="image">
</div>
</div>
<div class="item" data-category="food">
<div class="item-content">
<img src="https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(42).webp" alt="image">
</div>
</div>
<div class="item" data-category="architecture">
<div class="item-content">
<img src="https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(2).webp" alt="image">
</div>
</div>
<div class="item item-panoramic" data-category="people">
<div class="item-content">
<img src="https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(70).webp" alt="image">
</div>
</div>
<div class="item" data-category="people">
<div class="item-content">
<img src="https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(63).webp" alt="image">
</div>
</div>
<div class="item" data-category="nature">
<div class="item-content">
<img src="https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(114).webp" alt="image">
</div>
</div>
<div class="item" data-category="architecture">
<div class="item-content">
<img src="https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(4).webp" alt="image">
</div>
</div>
<div class="item" data-category="architecture">
<div class="item-content">
<img src="https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(6).webp" alt="image">
</div>
</div>
<div class="item" data-category="nature">
<div class="item-content">
<img src="https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(115).webp" alt="image">
</div>
</div>
<div class="item" data-category="food">
<div class="item-content">
<img src="https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(44).webp" alt="image">
</div>
</div>
<div class="item" data-category="architecture">
<div class="item-content">
<img src="https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(5).webp" alt="image">
</div>
</div>
<div class="item" data-category="food">
<div class="item-content">
<img src="https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(45).webp" alt="image">
</div>
</div>
<div class="item" data-category="food">
<div class="item-content">
<img src="https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(46).webp" alt="image">
</div>
</div>
<div class="item" data-category="food">
<div class="item-content">
<img src="https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(47).webp" alt="image">
</div>
</div>
<div class="item" data-category="nature">
<div class="item-content">
<img src="https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(111).webp" alt="image">
</div>
</div>
<div class="item" data-category="architecture">
<div class="item-content">
<img src="https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(3).webp" alt="image">
</div>
</div>
<div class="item" data-category="nature">
<div class="item-content">
<img src="https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(112).webp" alt="image">
</div>
</div>
</div>
</div>
$('.filter-fillgaps').mdbFilter({
draggable: true,
fillGaps: true
});
Filter gallery with lightbox
.webp)
.webp)
.webp)
.webp)
.webp)
.webp)
.webp)
.webp)
.webp)
.webp)
.webp)
.webp)
.webp)
.webp)
.webp)
.webp)
<div class="filter filter-lightbox">
<div class="filter-nav">
<button class="btn btn-success active" data-filter="">All</button>
<button class="btn btn-primary" data-filter="nature">Nature</button>
<button class="btn btn-primary" data-filter="food">Food</button>
<button class="btn btn-primary" data-filter="architecture">Architecture</button>
</div>
<div class="filter-gallery mdb-ligthbox">
<figure class="item" data-category="nature">
<div class="item-content">
<a href="/img/Photos/Lightbox/Original/img%20(30).webp" data-size="1600x1067">
<img src="https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(30).webp" alt="image">
</a>
</div>
</figure>
<figure class="item" data-category="architecture">
<div class="item-content">
<a href="/img/Photos/Lightbox/Original/img%20(1).webp" data-size="1600x1067">
<img src="https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(1).webp" alt="image">
</a>
</div>
</figure>
<figure class="item" data-category="food">
<div class="item-content">
<a href="/img/Photos/Lightbox/Original/img%20(42).webp" data-size="1600x1067">
<img src="https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(42).webp" alt="image">
</a>
</div>
</figure>
<figure class="item" data-category="architecture">
<div class="item-content">
<a href="/img/Photos/Lightbox/Original/img%20(2).webp" data-size="1600x1067">
<img src="https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(2).webp" alt="image">
</a>
</div>
</figure>
<figure class="item" data-category="nature">
<div class="item-content">
<a href="/img/Photos/Lightbox/Original/img%20(114).webp" data-size="1600x1067">
<img src="https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(114).webp" alt="image">
</a>
</div>
</figure>
<figure class="item" data-category="architecture">
<div class="item-content">
<a href="/img/Photos/Lightbox/Original/img%20(4).webp" data-size="1600x1067">
<img src="https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(4).webp" alt="image">
</a>
</div>
</figure>
<figure class="item" data-category="architecture">
<div class="item-content">
<a href="/img/Photos/Lightbox/Original/img%20(6).webp" data-size="1600x1067">
<img src="https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(6).webp" alt="image">
</a>
</div>
</figure>
<figure class="item" data-category="nature">
<div class="item-content">
<a href="/img/Photos/Lightbox/Original/img%20(115).webp" data-size="1600x1067">
<img src="https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(115).webp" alt="image">
</a>
</div>
</figure>
<figure class="item" data-category="food">
<div class="item-content">
<a href="/img/Photos/Lightbox/Original/img%20(44).webp" data-size="1600x1067">
<img src="https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(44).webp" alt="image">
</a>
</div>
</figure>
<figure class="item" data-category="architecture">
<div class="item-content">
<a href="/img/Photos/Lightbox/Original/img%20(5).webp" data-size="1600x1067">
<img src="https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(5).webp" alt="image">
</a>
</div>
</figure>
<figure class="item" data-category="food">
<div class="item-content">
<a href="/img/Photos/Lightbox/Original/img%20(45).webp" data-size="1600x1067">
<img src="https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(45).webp" alt="image">
</a>
</div>
</figure>
<figure class="item" data-category="food">
<div class="item-content">
<a href="/img/Photos/Lightbox/Original/img%20(46).webp" data-size="1600x1067">
<img src="https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(46).webp" alt="image">
</a>
</div>
</figure>
<figure class="item" data-category="food">
<div class="item-content">
<a href="/img/Photos/Lightbox/Original/img%20(47).webp" data-size="1600x1067">
<img src="https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(47).webp" alt="image">
</a>
</div>
</figure>
<figure class="item" data-category="nature">
<div class="item-content">
<a href="/img/Photos/Lightbox/Original/img%20(111).webp" data-size="1600x1067">
<img src="https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(111).webp" alt="image">
</a>
</div>
</figure>
<figure class="item" data-category="architecture">
<div class="item-content">
<a href="/img/Photos/Lightbox/Original/img%20(3).webp" data-size="1600x1067">
<img src="https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(3).webp" alt="image">
</a>
</div>
</figure>
<figure class="item" data-category="nature">
<div class="item-content">
<a href="/img/Photos/Lightbox/Original/img%20(112).webp" data-size="1600x1067">
<img src="https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(112).webp" alt="image">
</a>
</div>
</figure>
</div>
</div>
// Lightbox init
$('#mdb-lightbox-ui').load('../mdb-addons/mdb-lightbox-ui.html');
// Filter init
$('.filter-lightbox').mdbFilter();
Filter - getting started : download & setup
Download
This plugin requires a purchase.
Buy Filter plugin
Installation tutorial
Note: The video below shows a different plugin, but it does not matter. The installation process is the same for all plugins.