--- layout: examples title: Masonry example extra_js: - src: "https://cdnjs.cloudflare.com/ajax/libs/masonry/4.2.2/masonry.pkgd.min.js" integrity: "sha384-GNFwBvfVxBkLMJpYMOABq3c+d3KnQxudP/mGPkzpZSTYykLBNsZEnG2D9G/X/+7D" async: true ---

Bootstrap and Masonry

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:


<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/4.2.2/masonry.pkgd.min.js" integrity="sha384-GNFwBvfVxBkLMJpYMOABq3c+d3KnQxudP/mGPkzpZSTYykLBNsZEnG2D9G/X/+7D" crossorigin="anonymous" async></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.


{{< placeholder width="100%" height="200" class="card-img-top" text="Image cap" >}}
Card title that wraps to a new line

This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

{{< placeholder width="100%" height="200" class="card-img-top" text="Image cap" >}}
Card title

This card has supporting text below as a natural lead-in to additional content.

Last updated 3 mins ago

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.

Card title

This card has a regular title and short paragraph of text below it.

Last updated 3 mins ago

{{< placeholder width="100%" height="260" class="card-img" text="Card image" >}}

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Card title

This is another card with title and supporting text below. This card has some additional content to make it slightly taller overall.

Last updated 3 mins ago