Isotope

Landkit only

Filter & sort magical layouts.

Plugin documentation

..
..
..
..
..
<!-- Nav -->
<nav class="nav">
  <a href="#" data-toggle="pill" data-filter="*" data-target="#portfolio">
    Primary
  </a>
  <a href="#" data-toggle="pill" data-filter=".product" data-target="#portfolio">
    Product
  </a>
  <a href="#" data-toggle="pill" data-filter=".ux" data-target="#portfolio">
    UX
  </a>
  <a href="#" data-toggle="pill" data-filter=".resources" data-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/portfolio/portfolio-1.jpg" alt="..">

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

    <!-- Image -->
    <img class="img-fluid rounded mb-7" src="../assets/img/portfolio/portfolio-10.jpg" alt="..">

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

    <!-- Image -->
    <img class="img-fluid rounded mb-7" src="../assets/img/portfolio/portfolio-11.jpg" alt="..">

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

    <!-- Image -->
    <img class="img-fluid rounded mb-7" src="../assets/img/portfolio/portfolio-13.jpg" alt="..">

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

    <!-- Image -->
    <img class="img-fluid rounded mb-7" src="../assets/img/portfolio/portfolio-12.jpg" alt="..">

  </div>
</div>