--- layout: examples title: Masonry example extra_js: - src: "https://cdnjs.cloudflare.com/ajax/libs/masonry/4.2.2/masonry.pkgd.min.js" integrity: "sha256-Nn1q/fx0H7SNLZMQ5Hw5JLaTRZp0yILA/FRexe19VdI=" async: true ---
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:
{{< highlight html >}}{{< /highlight >}}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 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.
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.
This card has a regular title and short paragraphy of text below it.
Last updated 3 mins ago
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
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