Filter
Bootstrap Filter plugin
Note: This documentation is for an older version of Bootstrap (v.4). A
newer version is available for Bootstrap 5. We recommend migrating to the latest version of our product - Material Design for
Bootstrap 5.
Go to docs v.5
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.