...

Isotope

Skola only

Filter & sort magical layouts.

Plugin documentation

..
..
..
..
..
<!-- Nav -->
<nav class="nav">
  <a href="#" data-bs-toggle="pill" data-bs-filter="*" data-bs-target="#portfolio">
    Primary
  </a>
  <a href="#" data-bs-toggle="pill" data-bs-filter=".product" data-bs-target="#portfolio">
    Product
  </a>
  <a href="#" data-bs-toggle="pill" data-bs-filter=".ux" data-bs-target="#portfolio">
    UX
  </a>
  <a href="#" data-bs-toggle="pill" data-bs-filter=".resources" data-bs-target="#portfolio">
    Resources
  </a>
</nav>

<!-- Items -->
<div class="row" id="portfolio" data-isotope='{"layoutMode": "masonry"}'>
  <div class="col-12 col-md-4 product">

    <!-- Image -->
    <img class="img-fluid rounded mb-7" src="../assets/img/photos/photo-43.jpg" alt="..">

  </div>
  <div class="col-12 col-md-4 ux">

    <!-- Image -->
    <img class="img-fluid rounded mb-7" src="../assets/img/photos/photo-40.jpg" alt="..">

  </div>
  <div class="col-12 col-md-4 product">

    <!-- Image -->
    <img class="img-fluid rounded mb-7" src="../assets/img/photos/photo-39.jpg" alt="..">

  </div>
  <div class="col-12 col-md-4 ux">

    <!-- Image -->
    <img class="img-fluid rounded mb-7" src="../assets/img/photos/photo-44.jpg" alt="..">

  </div>
  <div class="col-12 col-md-4 resources">

    <!-- Image -->
    <img class="img-fluid rounded mb-7" src="../assets/img/photos/photo-16.jpg" alt="..">

  </div>
</div>