Rate this 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();
      

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
        });
      

Filter - getting started : download & setup


Download

This plugin requires a purchase.

Buy Filter plugin - $9