Rate these docs

Filter

Bootstrap Filter plugin

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


        <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).jpg" 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).jpg" 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).jpg" 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).jpg" 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).jpg" 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).jpg" 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).jpg" 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).jpg" 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).jpg" 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).jpg" 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).jpg" 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).jpg" 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).jpg" 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).jpg" 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).jpg" 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).jpg" 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).jpg" 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).jpg" 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).jpg" 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).jpg" 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).jpg" 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).jpg" 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).jpg" 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).jpg" 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).jpg" 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).jpg" 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).jpg" 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).jpg" 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).jpg" 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).jpg" 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).jpg" 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).jpg" alt="image">
              </div>
            </div>
          </div>
        </div>
      

        $('.filter-draggable').mdbFilter({
          draggable: true
        });
      

Draggable gallery with mixed content (filled gaps)


        <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).jpg" 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).jpg" 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).jpg" 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).jpg" 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).jpg" 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).jpg" 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).jpg" 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).jpg" 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).jpg" 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).jpg" 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).jpg" 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).jpg" 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).jpg" 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).jpg" 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).jpg" 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).jpg" 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).jpg" 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).jpg" 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).jpg" alt="image">
              </div>
            </div>
          </div>
        </div>
      

        $('.filter-fillgaps').mdbFilter({
          draggable: true,
          fillGaps: true
        });
      

Install MDB CLI
It's the fastest way to create and host MDB projects
Free Download

Filter - getting started : download & setup


Download

This plugin requires a purchase.

Buy Filter plugin - $9

Installation tutorial

Note: The video below shows a different plugin, but it does not matter. The installation process is the same for all plugins.