Skip to main content

Masonry

Square only

Isotope - Filter & sort magical layouts.

Isotope docsarrow-right-1

By adding data-isotope attribute you can initialise the component. Within this attribute you can define many settings, like layoutMode or itemSelector.

You can filter all the elements with data-filter attribute.

<nav class="nav">
    <a href="javascript: void(0);" data-filter="*" data-bs-target="#portfolio">All</a>
    <a href="javascript: void(0);" data-filter=".illustration" data-bs-target="#portfolio">Illustration</a>
    <a href="javascript: void(0);" data-filter=".branding" data-bs-target="#portfolio">Branding</a>
    <a href="javascript: void(0);" data-filter=".photographing" data-bs-target="#portfolio">Photographing</a>
</nav>

<div data-isotope='{"layoutMode": "masonry", "itemSelector": ".grid-item"}' id="portfolio">
    <div class="grid-item branding">
        <img src="../assets/images/photos/photo-10.jpg" alt="..." class="img-fluid w-100 rounded">
    </div>
    <div class="grid-item photographing">
        <img src="../assets/images/photos/photo-11.jpg" alt="..." class="img-fluid w-100 rounded">
    </div>
    <div class="grid-item branding">
        <img src="../assets/images/photos/photo-12.jpg" alt="..." class="img-fluid w-100 rounded">
    </div>
    <div class="grid-item photographing">
        <img src="../assets/images/photos/photo-13.jpg" alt="..." class="img-fluid w-100 rounded">
    </div>
    <div class="grid-item photographing">
        <img src="../assets/images/photos/photo-14.jpg" alt="..." class="img-fluid w-100 rounded">
    </div>
    <div class="grid-item illustration">
        <img src="../assets/images/photos/photo-15.jpg" alt="..." class="img-fluid w-100 rounded">
    </div>
    <div class="grid-item illustration">
        <img src="../assets/images/photos/photo-16.jpg" alt="..." class="img-fluid w-100 rounded">
    </div>
    <div class="grid-item branding">
        <img src="../assets/images/photos/photo-17.jpg" alt="..." class="img-fluid w-100 rounded">
    </div>
    <div class="grid-item branding">
        <img src="../assets/images/photos/photo-18.jpg" alt="..." class="img-fluid w-100 rounded">
    </div>
</div>