Integrate Masonry with the Bootstrap grid system and cards component.
Masonry is not included in Bootstrap. Add it by including the JavaScript plugin manually, or using a CDN like so:
To use the plugin, you need to add the following files.
<!-- Javascript -->
<script src="libs/masonry.pkgd.min.js"></script>
By adding data-masonry='{"percentPosition": true }'
to the .row
wrapper, we can combine the powers of Bootstrap's responsive grid and Masonry's positioning.
This card has supporting text below as a natural lead-in to additional content.
Last updated 3 mins ago
<div class="row" data-masonry='{"percentPosition": true }'>
<div class="col-md-4">
<div class="card mb-4">
<div class="card-body">...</div>
</div>
</div>
<div class="col-md-4">
<div class="card mb-4">
<div class="card-body">...</div>
</div>
</div>
<div class="col-md-4">
<div class="card mb-4">
<div class="card-body">...</div>
</div>
</div>
<div class="col-md-4">
<div class="card mb-4">
<div class="card-body">...</div>
</div>
</div>
<div class="col-md-4">
<div class="card mb-4">
<div class="card-body">...</div>
</div>
</div>
<div class="col-md-4">
<div class="card mb-4">
<div class="card-body">...</div>
</div>
</div>
</div>