2019-07-17 23:46:40 +02:00
---
layout: examples
title: Masonry example
extra_js:
2020-11-15 13:21:01 +01:00
- src: "https://cdn.jsdelivr.net/npm/masonry-layout@4.2.2/dist/masonry.pkgd.min.js"
2019-07-18 11:30:42 +02:00
integrity: "sha384-GNFwBvfVxBkLMJpYMOABq3c+d3KnQxudP/mGPkzpZSTYykLBNsZEnG2D9G/X/+7D"
2019-07-17 23:46:40 +02:00
async: true
---
2020-09-10 11:39:29 +02:00
< main class = "container py-5" >
2019-07-17 23:46:40 +02:00
< h1 > Bootstrap and Masonry< / h1 >
< p class = "lead" > Integrate < a href = "https://masonry.desandro.com/" > Masonry< / a > with the Bootstrap grid system and cards component.< / p >
< p > Masonry is not included in Bootstrap. Add it by including the JavaScript plugin manually, or using a CDN like so:< / p >
2019-07-18 11:29:12 +02:00
< pre > < code >
2020-11-15 13:21:01 +01:00
< script src=" https://cdn.jsdelivr.net/npm/masonry-layout@4.2.2/dist/masonry.pkgd.min.js" integrity=" sha384-GNFwBvfVxBkLMJpYMOABq3c+d3KnQxudP/mGPkzpZSTYykLBNsZEnG2D9G/X/+7D" crossorigin=" anonymous" async> < /script>
2019-07-18 11:29:12 +02:00
< / code > < / pre >
2019-07-17 23:46:40 +02:00
< p > By adding < code > data-masonry='{"percentPosition": true }'< / code > to the < code > .row< / code > wrapper, we can combine the powers of Bootstrap's responsive grid and Masonry's positioning.< / p >
< hr class = "my-5" >
< div class = "row" data-masonry = '{"percentPosition": true }' >
< div class = "col-sm-6 col-lg-4 mb-4" >
< div class = "card" >
{{< placeholder width = "100%" height = "200" class = "card-img-top" text = "Image cap" > }}
< div class = "card-body" >
< h5 class = "card-title" > Card title that wraps to a new line< / h5 >
< p class = "card-text" > This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.< / p >
< / div >
< / div >
< / div >
< div class = "col-sm-6 col-lg-4 mb-4" >
< div class = "card p-3" >
2020-06-12 23:26:37 +02:00
< figure class = "p-3 mb-0" >
< blockquote class = "blockquote" >
2020-12-11 21:05:33 +01:00
< p > A well-known quote, contained in a blockquote element.< / p >
2020-06-12 23:26:37 +02:00
< / blockquote >
2023-01-17 00:55:28 +01:00
< figcaption class = "blockquote-footer mb-0 text-body-secondary" >
2020-06-12 23:26:37 +02:00
Someone famous in < cite title = "Source Title" > Source Title< / cite >
< / figcaption >
< / figure >
2019-07-17 23:46:40 +02:00
< / div >
< / div >
< div class = "col-sm-6 col-lg-4 mb-4" >
< div class = "card" >
{{< placeholder width = "100%" height = "200" class = "card-img-top" text = "Image cap" > }}
< div class = "card-body" >
< h5 class = "card-title" > Card title< / h5 >
< p class = "card-text" > This card has supporting text below as a natural lead-in to additional content.< / p >
2023-01-17 00:55:28 +01:00
< p class = "card-text" > < small class = "text-body-secondary" > Last updated 3 mins ago< / small > < / p >
2019-07-17 23:46:40 +02:00
< / div >
< / div >
< / div >
< div class = "col-sm-6 col-lg-4 mb-4" >
2022-05-20 19:21:48 +02:00
< div class = "card text-bg-primary text-center p-3" >
2020-06-12 23:26:37 +02:00
< figure class = "mb-0" >
< blockquote class = "blockquote" >
2020-12-11 21:05:33 +01:00
< p > A well-known quote, contained in a blockquote element.< / p >
2020-06-12 23:26:37 +02:00
< / blockquote >
< figcaption class = "blockquote-footer mb-0 text-white" >
Someone famous in < cite title = "Source Title" > Source Title< / cite >
< / figcaption >
< / figure >
2019-07-17 23:46:40 +02:00
< / div >
< / div >
< div class = "col-sm-6 col-lg-4 mb-4" >
< div class = "card text-center" >
< div class = "card-body" >
< h5 class = "card-title" > Card title< / h5 >
2020-06-12 23:26:37 +02:00
< p class = "card-text" > This card has a regular title and short paragraph of text below it.< / p >
2023-01-17 00:55:28 +01:00
< p class = "card-text" > < small class = "text-body-secondary" > Last updated 3 mins ago< / small > < / p >
2019-07-17 23:46:40 +02:00
< / div >
< / div >
< / div >
< div class = "col-sm-6 col-lg-4 mb-4" >
< div class = "card" >
{{< placeholder width = "100%" height = "260" class = "card-img" text = "Card image" > }}
< / div >
< / div >
< div class = "col-sm-6 col-lg-4 mb-4" >
2020-06-09 15:44:20 +02:00
< div class = "card p-3 text-end" >
2020-06-12 23:26:37 +02:00
< figure class = "mb-0" >
< blockquote class = "blockquote" >
2020-12-11 21:05:33 +01:00
< p > A well-known quote, contained in a blockquote element.< / p >
2020-06-12 23:26:37 +02:00
< / blockquote >
2023-01-17 00:55:28 +01:00
< figcaption class = "blockquote-footer mb-0 text-body-secondary" >
2020-06-12 23:26:37 +02:00
Someone famous in < cite title = "Source Title" > Source Title< / cite >
< / figcaption >
< / figure >
2019-07-17 23:46:40 +02:00
< / div >
< / div >
< div class = "col-sm-6 col-lg-4 mb-4" >
< div class = "card" >
< div class = "card-body" >
< h5 class = "card-title" > Card title< / h5 >
< p class = "card-text" > This is another card with title and supporting text below. This card has some additional content to make it slightly taller overall.< / p >
2023-01-17 00:55:28 +01:00
< p class = "card-text" > < small class = "text-body-secondary" > Last updated 3 mins ago< / small > < / p >
2019-07-17 23:46:40 +02:00
< / div >
< / div >
< / div >
< / div >
2020-09-10 11:39:29 +02:00
< / main >