bootstrap4.masonry.js

masonry using Bootstrap 4 grid

Example

<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="js/bootstrap4.masonry.min.js"></script> 

HTML

<div class="row masonry" data-target=".item" data-col-xs="12" data-col-sm="6" data-col-md="4" data-col-lg="4" data-col-xl="3">   <div class="item">     <p>Lorem ipsum dolor sit amet.</p>   </div> </div> 

or

<div class="row masonry" data-target=".item" data-col-xs="12" data-col-sm="6" data-col-md="4" data-col-lg="4" data-col-xl="3">   <div class="col">     <div class="item">       <p>Lorem ipsum dolor sit amet.</p>     </div>   </div> </div> 

bootstrap3.masonry.js

masonry using Bootstrap 3 grid

Example

<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="js/bootstrap3.masonry.min.js"></script> 

HTML

<div class="row masonry" data-target=".item" data-col-xs="12" data-col-sm="4" data-col-md="3">   <div class="item">     <p>Lorem ipsum dolor sit amet.</p>   </div> </div> 

or

<div class="row masonry" data-target=".item" data-col-xs="12" data-col-sm="4" data-col-md="3">   <div class="col-xs-12 col-sm-4 col-md-3">     <div class="item">       <p>Lorem ipsum dolor sit amet.</p>     </div>   </div> </div> 

JS

$('.masonry').masonry(); 

Push method to add elements

var $masonry = $('.masonry').masonry(); $.get('...', function(data) {   $masonry.push($(data)); });