Loading...

Isotope filter

Code for Isotope filter
Click to top right corner copy code button to copy the isoptope filter code and paste anywhere into the project
        
            <!--Filter container-->
            <div class="container py-9 py-lg-11 position-relative z-index-1">
           
               <!-- Isoptope filter Nav -->
               <nav class="nav nav-pills justify-content-center mb-4">
           
                   <!--Filter nav item-->
                   <a class="nav-link px-3 py-1 me-1 mb-1 active" href="#" data-bs-toggle="pill" data-filter="*"
                       data-bs-target="#projects">
                       Projects
                   </a>
           
                   <!--Filter nav item-->
                   <a class="nav-link px-3 py-1 me-1 mb-1" href="#" data-bs-toggle="pill" data-filter=".bootstrap"
                       data-bs-target="#bootstrap">
                       Bootstrap
                   </a>
           
                   <!--Filter nav item-->
                   <a class="nav-link px-3 py-1 me-1 mb-1" href="#" data-bs-toggle="pill" data-filter=".javascript"
                       data-bs-target="#javascript">
                       Javascript
                   </a>
           
                   <!--Filter nav item-->
                   <a class="nav-link px-3 py-1 me-1 mb-1" href="#" data-bs-toggle="pill" data-filter=".figma"
                       data-bs-target="#figma">
                       Figma
                   </a>
               
           
               <!--Isoptope Filters row-->
               <div id="projects" data-isotope='{"layoutMode": "masonry"}' class="row">
           
                   <!--Filter grid item-->
                   <div class="col-md-6 col-lg-4 mb-4 bootstrap grid-item">
                       <a href="#!" class="card-hover">
                           <div class="overflow-hidden position-relative mb-4">
                               <img src="assets/img/projects/1.jpg" alt="" class="img-zoom img-fluid">
                           </div>
                           <h5 class="mb-1">Sed quia non numquam</h5>
                           <span class="text-muted">UI / UX</span>
                       </a>
                   </div>
           
                   <!--Filter grid item-->
                   <div class="col-md-6 col-lg-4 mb-4 figma grid-item">
                       <a href="#!" class="card-hover">
                           <div class="overflow-hidden position-relative mb-4">
                               <img src="assets/img/projects/4.jpg" alt="" class="img-zoom img-fluid">
                           </div>
                           <h5 class="mb-1">Ogólnie znana teza</h5>
                           <span class="text-muted">Category</span>
                       </a>
                   </div>
           
                   <!--Filter grid item-->
                   <div class="col-md-6 col-lg-4 mb-4 bootstrap grid-item">
                       <a href="#!" class="card-hover">
                           <div class="overflow-hidden position-relative mb-4">
                               <img src="assets/img/projects/half1.jpg" alt="" class="img-zoom img-fluid">
                           </div>
                           <h5 class="mb-1">El punto de</h5>
                           <span class="text-muted">Category</span>
                       </a>
                   </div>
           
                   <!--Filter grid item-->
                   <div class="col-md-6 col-lg-4 mb-4 figma grid-item">
                       <a href="#!" class="card-hover">
                           <div class="overflow-hidden position-relative mb-4">
                               <img src="assets/img/projects/3.jpg" alt="" class="img-zoom img-fluid">
                           </div>
                           <h5 class="mb-1">Sed quia non numquam</h5>
                           <span class="text-muted">Category</span>
                       </a>
                   </div>
           
                   <!--Filter grid item-->
                   <div class="col-md-6 col-lg-4 mb-4 bootstrap grid-item">
                       <a href="#!" class="card-hover">
                           <div class="overflow-hidden position-relative mb-4">
                               <img src="assets/img/projects/half2.jpg" alt="" class="img-zoom img-fluid">
                           </div>
                           <h5 class="mb-1">Dashboard Ui</h5>
                           <span class="text-muted">Category</span>
                       </a>
                   </div>
           
                   <!--Filter grid item-->
                   <div class="col-md-6 col-lg-4 mb-4 javascript grid-item">
                       <a href="#!" class="card-hover">
                           <div class="overflow-hidden position-relative mb-4">
                               <img src="assets/img/projects/half3.jpg" alt="" class="img-zoom img-fluid">
                           </div>
                           <h5 class="mb-1">Sed quia non numquam</h5>
                           <span class="text-muted">Category</span>
                       </a>
                   </div>
               </div>
               <!--/:Filter grid row end-->
           </div>