Isotope

Installation

Add script right before closing </body> tag, and initialize Isotope

            
              <!-- Plugin js -->
              <script src="src/plugins/isotope-layout/dist/isotope.pkgd.min.js"></script>
            
          

If you want to remove Isotope js editing theme.js in this function myIsotope_filter();

Example

How to use

You can use isotope with add class in data filter like this data-filter=".web" and use caption text with data-sub-html="title images"

            
              <!-- navigation -->
              <div class="button-group filters-button-group portfolio-nav text-center">
                <button class="portfolio-nav-item bg-transparent border-0 mb-4 mb-md-5 active" data-filter="*">All</button>
                <button class="portfolio-nav-item bg-transparent border-0 mb-4 mb-md-5" data-filter=".web">Web</button>
                <button class="portfolio-nav-item bg-transparent border-0 mb-4 mb-md-5" data-filter=".branding">Branding</button>
                <button class="portfolio-nav-item bg-transparent border-0 mb-4 mb-md-5" data-filter=".graphic">Graphic</button>
                <button class="portfolio-nav-item bg-transparent border-0 mb-4 mb-md-5" data-filter=".photovid">Photograpy</button>
              </div><!-- end navigation -->
              
              <!-- Portfolio Content -->
              <div id="thumbnail-images" class="grid portfolio row g-0">
                <figure data-src="assets/img-min/project/project_1.jpg" class="col-sm-6 col-lg-4 portfolio-item branding" data-sub-html="title images">
                  <img class="portfolio-image" src="assets/img-min/project/project_1.jpg" alt="Image Description">
                  <figcaption class="portfolio-info text-center">
                    <h3 class="h6 my-1 text-light">Logo Design</h3>
                    <small class="d-block">Branding</small>
                  </figcaption>
                </figure>

                <figure data-src="assets/img-min/project/project_2.jpg" class="col-sm-6 col-lg-4 portfolio-item photovid branding web" data-sub-html="title images">
                  <img class="portfolio-image" src="assets/img-min/project/project_2.jpg" alt="Image Description">
                  <figcaption class="portfolio-info text-center">
                    <h3 class="h6 my-1 text-light">Web Development</h3>
                    <small class="d-block">Web</small>
                  </figcaption>
                </figure>

                <figure data-src="assets/img-min/project/project_3.jpg" class="col-sm-6 col-lg-4 portfolio-item graphic" data-sub-html="title images">
                  <img class="portfolio-image" src="assets/img-min/project/project_3.jpg" alt="Image Description">
                  <figcaption class="portfolio-info text-center">
                    <h3 class="h6 my-1 text-light">Graphic Design</h3>
                    <small class="d-block">Graphic</small>
                  </figcaption>
                </figure>

                <figure data-src="assets/img-min/project/project_4.jpg" class="col-sm-6 col-lg-4 portfolio-item branding graphic" data-sub-html="title images">
                  <img class="portfolio-image" src="assets/img-min/project/project_4.jpg" alt="Image Description">
                  <figcaption class="portfolio-info text-center">
                    <h3 class="h6 my-1 text-light">Video Marketing</h3>
                    <small class="d-block">Video</small>
                  </figcaption>
                </figure>

                <figure data-src="assets/img-min/project/project_5.jpg" class="col-sm-6 col-lg-4 portfolio-item photovid" data-sub-html="title images">
                  <img class="portfolio-image" src="assets/img-min/project/project_5.jpg" alt="Image Description">
                  <figcaption class="portfolio-info text-center">
                    <h3 class="h6 my-1 text-light">Photography</h3>
                    <small class="d-block">Photo</small>
                  </figcaption>
                </figure>

                <figure data-src="assets/img-min/project/project_6.jpg" class="col-sm-6 col-lg-4 portfolio-item web" data-sub-html="title images">
                  <img class="portfolio-image" src="assets/img-min/project/project_6.jpg" alt="Image Description">
                  <figcaption class="portfolio-info text-center">
                    <h3 class="h6 my-1 text-light">Apps Development</h3>
                    <small class="d-block">Apps</small>
                  </figcaption>
                </figure>
              </div>
            
          

Isotope demo with Lightgallery.js see in here

For complete documentation read in here