Modals

Use this modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content. Modals are built with HTML, CSS, and JavaScript. They’re positioned over everything else in the document and remove scroll from the so that modal content scrolls instead.

Example

This is just an example of how a modal is structured.

Example


<div class="modal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header py-4">
                <h5 class="modal-title">Modal title</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
            </div>
            <div class="modal-body">
                <p class="mb-0">Modal body text goes here.</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary">Save changes</button>
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

Live demo

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:

Example


<div class="masonry-container">
    <div class="masonry-filter-menu link-menu link-menu--style-1">
        <a class="btn-filter" data-filter="*">Show all</a>
        <a class="btn-filter" data-filter="branding">Branding</a>
        <a class="btn-filter" data-filter="identity">Identity</a>
    </div>

    <div class="row masonry">
        <div class="masonry-item col-sm-6 branding">
            ...
        </div>

        <div class="masonry-item col-sm-6 identity">
            ...
        </div>
    </div>
</div>;

Sizing

Modals have two optional sizes, available via modifier classes to be placed on a .modal-dialog. These sizes kick in at certain breakpoints to avoid horizontal scrollbars on narrower viewports.

Add .modal-lg or .modal-sm on the .modal-dialog container to make the modal larger or smaller.