2020-12-07 18:28:07 +02:00
<!doctype html>
< html lang = "en" >
< head >
< meta charset = "utf-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1" >
< meta name = "description" content = "" >
< meta name = "author" content = "Mark Otto, Jacob Thornton, and Bootstrap contributors" >
2021-03-23 18:32:27 +02:00
< meta name = "generator" content = "Hugo 0.82.0" >
2020-12-07 18:28:07 +02:00
< title > Masonry example · Bootstrap v5.0< / title >
< link rel = "canonical" href = "https://getbootstrap.com/docs/5.0/examples/masonry/" >
<!-- Bootstrap core CSS -->
2021-03-23 18:32:27 +02:00
< link href = "/docs/5.0/dist/css/bootstrap.min.css" rel = "stylesheet" integrity = "sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin = "anonymous" >
2020-12-07 18:28:07 +02:00
<!-- Favicons -->
< link rel = "apple-touch-icon" href = "/docs/5.0/assets/img/favicons/apple-touch-icon.png" sizes = "180x180" >
< link rel = "icon" href = "/docs/5.0/assets/img/favicons/favicon-32x32.png" sizes = "32x32" type = "image/png" >
< link rel = "icon" href = "/docs/5.0/assets/img/favicons/favicon-16x16.png" sizes = "16x16" type = "image/png" >
< link rel = "manifest" href = "/docs/5.0/assets/img/favicons/manifest.json" >
< link rel = "mask-icon" href = "/docs/5.0/assets/img/favicons/safari-pinned-tab.svg" color = "#7952b3" >
< link rel = "icon" href = "/docs/5.0/assets/img/favicons/favicon.ico" >
< meta name = "theme-color" content = "#7952b3" >
< style >
.bd-placeholder-img {
font-size: 1.125rem;
text-anchor: middle;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
@media (min-width: 768px) {
.bd-placeholder-img-lg {
font-size: 3.5rem;
}
}
< / style >
< / head >
< body >
< main class = "container py-5" >
< 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 >
< pre > < code >
< 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>
< / code > < / pre >
< 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" >
< svg class = "bd-placeholder-img card-img-top" width = "100%" height = "200" xmlns = "http://www.w3.org/2000/svg" role = "img" aria-label = "Placeholder: Image cap" preserveAspectRatio = "xMidYMid slice" focusable = "false" > < title > Placeholder< / title > < rect width = "100%" height = "100%" fill = "#868e96" / > < text x = "50%" y = "50%" fill = "#dee2e6" dy = ".3em" > Image cap< / text > < / svg >
< 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" >
< figure class = "p-3 mb-0" >
< blockquote class = "blockquote" >
2021-02-10 18:22:23 +02:00
< p > A well-known quote, contained in a blockquote element.< / p >
2020-12-07 18:28:07 +02:00
< / blockquote >
< figcaption class = "blockquote-footer mb-0 text-muted" >
Someone famous in < cite title = "Source Title" > Source Title< / cite >
< / figcaption >
< / figure >
< / div >
< / div >
< div class = "col-sm-6 col-lg-4 mb-4" >
< div class = "card" >
< svg class = "bd-placeholder-img card-img-top" width = "100%" height = "200" xmlns = "http://www.w3.org/2000/svg" role = "img" aria-label = "Placeholder: Image cap" preserveAspectRatio = "xMidYMid slice" focusable = "false" > < title > Placeholder< / title > < rect width = "100%" height = "100%" fill = "#868e96" / > < text x = "50%" y = "50%" fill = "#dee2e6" dy = ".3em" > Image cap< / text > < / svg >
< 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 >
< p class = "card-text" > < small class = "text-muted" > Last updated 3 mins ago< / small > < / p >
< / div >
< / div >
< / div >
< div class = "col-sm-6 col-lg-4 mb-4" >
< div class = "card bg-primary text-white text-center p-3" >
< figure class = "mb-0" >
< blockquote class = "blockquote" >
2021-02-10 18:22:23 +02:00
< p > A well-known quote, contained in a blockquote element.< / p >
2020-12-07 18:28:07 +02:00
< / blockquote >
< figcaption class = "blockquote-footer mb-0 text-white" >
Someone famous in < cite title = "Source Title" > Source Title< / cite >
< / figcaption >
< / figure >
< / 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 >
< p class = "card-text" > This card has a regular title and short paragraph of text below it.< / p >
< p class = "card-text" > < small class = "text-muted" > Last updated 3 mins ago< / small > < / p >
< / div >
< / div >
< / div >
< div class = "col-sm-6 col-lg-4 mb-4" >
< div class = "card" >
< svg class = "bd-placeholder-img card-img" width = "100%" height = "260" xmlns = "http://www.w3.org/2000/svg" role = "img" aria-label = "Placeholder: Card image" preserveAspectRatio = "xMidYMid slice" focusable = "false" > < title > Placeholder< / title > < rect width = "100%" height = "100%" fill = "#868e96" / > < text x = "50%" y = "50%" fill = "#dee2e6" dy = ".3em" > Card image< / text > < / svg >
< / div >
< / div >
< div class = "col-sm-6 col-lg-4 mb-4" >
< div class = "card p-3 text-end" >
< figure class = "mb-0" >
< blockquote class = "blockquote" >
2021-02-10 18:22:23 +02:00
< p > A well-known quote, contained in a blockquote element.< / p >
2020-12-07 18:28:07 +02:00
< / blockquote >
< figcaption class = "blockquote-footer mb-0 text-muted" >
Someone famous in < cite title = "Source Title" > Source Title< / cite >
< / figcaption >
< / figure >
< / 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 >
< p class = "card-text" > < small class = "text-muted" > Last updated 3 mins ago< / small > < / p >
< / div >
< / div >
< / div >
< / div >
< / main >
2021-03-23 18:32:27 +02:00
< script src = "/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity = "sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin = "anonymous" > < / script >
2020-12-07 18:28:07 +02:00
< script async 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" > < / script >
< / body >
< / html >
