Purpose – Application UI Kit

Masonry

Documentation and examples for creating, filtering and sorting magical layouts with the power of Isotope.

Usage

JS

In order to use this plugin on your page you will need to include the following script in the “Page JS” area from the page’s footer:

<script src="../../assets/libs/isotope-layout/dist/isotope.pkgd.min.js"></script>

Initialization

Now, we need to add basic Masonry layout to our app. You can use the grid’s .col-* classes for setting the column’s width.

Result
HTML

<div class="masonry-container">
    <div class="row masonry">
        <div class="masonry-item col-lg-4">
            <div>
                <svg class="bd-placeholder-img img-fluid rounded" width="800" height="600" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: 800x600"><title>Placeholder</title><rect fill="" width="100%" height="100%"/><text fill="" dy=".3em" x="50%" y="50%">800x600</text></svg>
            </div>
        </div>
        <div class="masonry-item col-lg-4">
            <div>
                <svg class="bd-placeholder-img img-fluid rounded" width="600" height="800" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: 600x800"><title>Placeholder</title><rect fill="" width="100%" height="100%"/><text fill="" dy=".3em" x="50%" y="50%">600x800</text></svg>
            </div>
        </div>
        <div class="masonry-item col-lg-4">
            <div>
                <svg class="bd-placeholder-img img-fluid rounded" width="600" height="800" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: 600x800"><title>Placeholder</title><rect fill="" width="100%" height="100%"/><text fill="" dy=".3em" x="50%" y="50%">600x800</text></svg>
            </div>
        </div>
        <div class="masonry-item col-lg-4">
            <div>
                <svg class="bd-placeholder-img img-fluid rounded" width="600" height="800" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: 600x800"><title>Placeholder</title><rect fill="" width="100%" height="100%"/><text fill="" dy=".3em" x="50%" y="50%">600x800</text></svg>
            </div>
        </div>
        <div class="masonry-item col-lg-4">
            <div>
                <svg class="bd-placeholder-img img-fluid rounded" width="800" height="600" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: 800x600"><title>Placeholder</title><rect fill="" width="100%" height="100%"/><text fill="" dy=".3em" x="50%" y="50%">800x600</text></svg>
            </div>
        </div>
        <div class="masonry-item col-lg-4">
            <div>
                <svg class="bd-placeholder-img img-fluid rounded" width="800" height="600" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: 800x600"><title>Placeholder</title><rect fill="" width="100%" height="100%"/><text fill="" dy=".3em" x="50%" y="50%">800x600</text></svg>
            </div>
        </div>
    </div>
</div>

Examples

<div class="masonry-container">
    <div class="row masonry">
        <div class="masonry-item col-lg-6">
            <div>
                <svg class="bd-placeholder-img img-fluid rounded" width="800" height="600" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: 800x600"><title>Placeholder</title><rect fill="" width="100%" height="100%"/><text fill="" dy=".3em" x="50%" y="50%">800x600</text></svg>
            </div>
        </div>
        <div class="masonry-item col-lg-6">
            <div>
                <svg class="bd-placeholder-img img-fluid rounded" width="600" height="800" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: 600x800"><title>Placeholder</title><rect fill="" width="100%" height="100%"/><text fill="" dy=".3em" x="50%" y="50%">600x800</text></svg>
            </div>
        </div>
        <div class="masonry-item col-lg-6">
            <div>
                <svg class="bd-placeholder-img img-fluid rounded" width="600" height="800" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: 600x800"><title>Placeholder</title><rect fill="" width="100%" height="100%"/><text fill="" dy=".3em" x="50%" y="50%">600x800</text></svg>
            </div>
        </div>
        <div class="masonry-item col-lg-6">
            <div>
                <svg class="bd-placeholder-img img-fluid rounded" width="800" height="600" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: 800x600"><title>Placeholder</title><rect fill="" width="100%" height="100%"/><text fill="" dy=".3em" x="50%" y="50%">800x600</text></svg>
            </div>
        </div>
    </div>
</div>

Sorting

You can easily sort through the masonry items by adding filter names on top of a item as bellow, where branding is name of the filter:

Result
HTML

<div class="masonry-container">
    <ul class="nav nav-pills masonry-filter-menu">
        <li class="nav-item">
            <a href="#" class="nav-link active" data-filter="*">Show all</a>
        </li>
        <li class="nav-item">
            <a href="#" class="nav-link" data-filter="branding">Branding</a>
        </li>
        <li class="nav-item">
            <a href="#" class="nav-link" data-filter="identity">Identity</a>
        </li>
        <li class="nav-item">
            <a href="#" class="nav-link" data-filter="design">Design</a>
        </li>
    </ul>
    <div class="row masonry mt-4">
        <div class="masonry-item col-lg-4 branding">
            <div>
                <svg class="bd-placeholder-img img-fluid rounded" width="800" height="600" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: 800x600"><title>Placeholder</title><rect fill="" width="100%" height="100%"/><text fill="" dy=".3em" x="50%" y="50%">800x600</text></svg>
            </div>
        </div>
        <div class="masonry-item col-lg-4 identity">
            <div>
                <svg class="bd-placeholder-img img-fluid rounded" width="600" height="800" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: 600x800"><title>Placeholder</title><rect fill="" width="100%" height="100%"/><text fill="" dy=".3em" x="50%" y="50%">600x800</text></svg>
            </div>
        </div>
        <div class="masonry-item col-lg-4 design branding">
            <div>
                <svg class="bd-placeholder-img img-fluid rounded" width="600" height="800" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: 600x800"><title>Placeholder</title><rect fill="" width="100%" height="100%"/><text fill="" dy=".3em" x="50%" y="50%">600x800</text></svg>
            </div>
        </div>
        <div class="masonry-item col-lg-4 identity">
            <div>
                <svg class="bd-placeholder-img img-fluid rounded" width="600" height="800" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: 600x800"><title>Placeholder</title><rect fill="" width="100%" height="100%"/><text fill="" dy=".3em" x="50%" y="50%">600x800</text></svg>
            </div>
        </div>
        <div class="masonry-item col-lg-4 branding">
            <div>
                <svg class="bd-placeholder-img img-fluid rounded" width="800" height="600" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: 800x600"><title>Placeholder</title><rect fill="" width="100%" height="100%"/><text fill="" dy=".3em" x="50%" y="50%">800x600</text></svg>
            </div>
        </div>
        <div class="masonry-item col-lg-4 design identity">
            <div>
                <svg class="bd-placeholder-img img-fluid rounded" width="800" height="600" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: 800x600"><title>Placeholder</title><rect fill="" width="100%" height="100%"/><text fill="" dy=".3em" x="50%" y="50%">800x600</text></svg>
            </div>
        </div>
    </div>
</div>