Bootstrap masonry

by Glynne Turner

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/4.2.2/masonry.pkgd.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
<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">
               <div class="item-content">
               
                <img class="img-fluid w-100 mb-3 img-thumbnail shadow-sm rounded-0" src="https://via.placeholder.com/600x400/09f.png/fff" alt="">
                <h2 class="h4">Blog Title</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>
                <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>
                <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>
            </div>
            
            <!-- Grid item -->
            <div class="col-lg-4 col-md-6 grid-item mb-4">
            <div class="item-content">
                <img class="img-fluid w-100 mb-3 img-thumbnail shadow-sm rounded-0"  src="https://via.placeholder.com/800x400/09f.png/fff"  alt="">
                <h2 class="h4">Blog Title</h2>
                <p class="small text-muted font-italic">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore...

CSS

/*
*
* ==========================================
* FOR DEMO PURPOSE
* ==========================================
*
*/
body {
  min-height: 100vh; 
}
.item-content{border:1px solid #e5e5e5; padding:5px}

JavaScript

$(function () {

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

   
    
});