logo
shape

Isotop

For more Details see Isotope Masonry DocumentationāŸ¶

Isotop documentation
Isotop Example
<div class="sortable mb-4" data-options='{"layoutMode":"packery"}'>
  <div class="row justify-content-center">
    <div class="col-lg-8 z-index-1">
      <div class="menu mb-3 shadow py-3 rounded-soft justify-content-center">
        <button class="btn btn-white item px-1 px-md-3 active" data-filter="*">All </button>
        <button class="btn btn-white item px-1 px-md-3" data-filter=".photography">Photography</button>
        <button class="btn btn-white item px-1 px-md-3" data-filter=".studio">Studio</button>
        <button class="btn btn-white item px-1 px-md-3" data-filter=".interior">Interior</button>
      </div>
    </div>
  </div>
  <div class="row sortable-container d-flex">
    <div class="col-lg-4 col-6 px-2 mb-3 sortable-item photography studio"><a href="../assets/img/gallery/g-1.png" data-fancybox="gallery" data-caption="Image caption"><img class="img-fluid rounded-soft" src="../assets/img/gallery/small-img/g-1.png" alt=""></a></div>
    <div class="col-lg-4 col-6 px-2 mb-3 sortable-item studio interior"><a href="../assets/img/gallery/g-3.png" data-fancybox="gallery" data-caption="Image caption"><img class="img-fluid rounded-soft" src="../assets/img/gallery/small-img/g-3.png" alt=""></a></div>
    <div class="col-lg-4 col-6 px-2 mb-3 sortable-item photography studio"><a href="../assets/img/gallery/g-2.png" data-fancybox="gallery" data-caption="Image caption"><img class="img-fluid rounded-soft" src="../assets/img/gallery/small-img/g-2.png" alt=""></a></div>
    <div class="col-lg-4 col-6 px-2 mb-3 sortable-item interior photography"><a href="../assets/img/gallery/g-7.png" data-fancybox="gallery" data-caption="Image caption"><img class="img-fluid rounded-soft" src="../assets/img/gallery/small-img/g-7.png" alt=""></a></div>
    <div class="col-lg-4 col-6 px-2 mb-3 sortable-item studio"><a href="../assets/img/gallery/g-6.png" data-fancybox="gallery" data-caption="Image caption"><img class="img-fluid rounded-soft" src="../assets/img/gallery/small-img/g-6.png" alt=""></a></div>
    <div class="col-lg-4 col-6 px-2 mb-3 sortable-item interior"><a href="../assets/img/gallery/g-10.png" data-fancybox="gallery" data-caption="Image caption"><img class="img-fluid rounded-soft" src="../assets/img/gallery/small-img/g-10.png" alt=""></a></div>
  </div>
</div>

Get latest news
in your box!

Get Special Offers & Deals. We Never Spam.

Made With By ThemeWagon