Bootstrap Masonry

by Kevin Pliester

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/4.2.1/masonry.pkgd.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/4.2.1/masonry.pkgd.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<div class="container">
<div class="row row-masonry">

<div class="col col-md-4 mb-4">
  <div class="card card-theme">
   <div class="card-body">
     <img src="http://via.placeholder.com/600x400" class="img-fluid" />
   </div>
  </div>
</div>

<div class="col col-md-4 mb-4">
  <div class="card card-theme">
   <div class="card-body">
     <img src="http://via.placeholder.com/700x300" class="img-fluid" />
   </div>
  </div>
</div>

<div class="col col-md-4 mb-4">
  <div class="card card-theme">
   <div class="card-body">
     <img src="http://via.placeholder.com/600x400" class="img-fluid" />
   </div>
  </div>
</div>

<div class="col col-md-4 mb-4">
  <div class="card card-theme">
   <div class="card-body">
     <img src="http://via.placeholder.com/400x500" class="img-fluid" />
   </div>
  </div>
</div>

<div class="col col-md-4 mb-4">
  <div class="card card-theme">
   <div class="card-body">
     <img src="http://via.placeholder.com/600x400" class="img-fluid" />
   </div>
  </div>
</div>

<div class="col col-md-4 mb-4">
  <div class="card card-theme">
   <div class="card-body">
     <img src="http://via.placeholder.com/400x400" class="img-fluid" />
   </div>
  </div>
</div>

<div class="col col-md-4">
  <div class="card card-theme">
   <div class="card-body">
     <img src="http://via.placeholder.com/700x300" class="img-fluid" />
   </div>
  </div>
</div>

<div class="col-md-4 mb-4">
  <div class="card card-theme">
   <div class="card-body">
     <img src="http://via.placeholder.com/600x400" class="img-fluid" />
   </div>
  </div>
</div>


</div>

</div>

SCSS

.container {
  margin: 25px auto;
}

.card-theme {
  .card-body {
    padding: 0px;
  }
}

JavaScript

(function($){
$('.row-masonry').masonry({
  itemSelector: '.col',
  percentPosition: true
})
})(jQuery)