Bootstrap masonry

by gk

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
<script src="//code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://unpkg.com/imagesloaded@4/imagesloaded.pkgd.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/4.2.2/masonry.pkgd.min.js"></script>
<!-- Demo header-->
<section class="py-5 header text-center">
    <div class="container py-4">
        <header>
            <h1 class="display-4">Bootstrap masonry</h1>
            <p class="font-italic text-muted mb-1">Use Masonry layouts with Bootstrap 4 grid system, using imagesLoaded plugin to fix the page loading issue.</p>
            <p class="font-italic text-muted">Snippet by <a class="text-dark" href="https://bootstrapious.com/">
                <u>Bootstrapious</u></a>
            </p>
        </header>
    </div>
</section>


<section class="pb-5">
    <div class="container text-center">
        <!-- Masonry grid -->
        <div class="gallery-wrapper">
            <!-- Grid sizer -->
            <div class="grid-sizer col-lg-4 col-md-6"></div>
            
            <!-- Grid item -->
            <div class="col-lg-4 col-md-6 grid-item mb-4">
                <img class="img-fluid w-100 mb-3 img-thumbnail shadow-sm rounded-0" src="https://bootstrapious.com/i/snippets/sn-masonry/grid-item-1.png" alt="">
                <h2 class="h4">Masonry grid item</h2>
                <p class="small text-muted font-italic">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            </div>
            
            <!-- Grid item -->
            <div class="col-lg-4 col-md-6 grid-item mb-4">
               ...

CSS

/*
*
* ==========================================
* FOR DEMO PURPOSE
* ==========================================
*
*/
body {
  min-height: 100vh; 
}

JavaScript

$(function () {

    // Initate masonry grid
    var $grid = $('.gallery-wrapper').masonry({
        temSelector: '.grid-item',
        columnWidth: '.grid-sizer',
        percentPosition: true,
    });

    // Initate imagesLoaded
    $grid.imagesLoaded().progress( function() {
        $grid.masonry('layout');
    });
    
});