diff options
author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2023-06-24 12:44:40 +0000 |
---|---|---|
committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2023-06-24 12:44:49 +0000 |
commit | db46bfc03f3a22752ef6bd91ae577d893872a216 (patch) | |
tree | 89d924513bc95e6bac4dc8e26f0da84caa477b7b /site/content/docs/5.2/examples/masonry/index.html | |
parent | Releasing debian version 5.2.3+dfsg-8. (diff) | |
download | bootstrap-html-db46bfc03f3a22752ef6bd91ae577d893872a216.tar.xz bootstrap-html-db46bfc03f3a22752ef6bd91ae577d893872a216.zip |
Merging upstream version 5.3.0+dfsg.
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'site/content/docs/5.2/examples/masonry/index.html')
-rw-r--r-- | site/content/docs/5.2/examples/masonry/index.html | 105 |
1 files changed, 0 insertions, 105 deletions
diff --git a/site/content/docs/5.2/examples/masonry/index.html b/site/content/docs/5.2/examples/masonry/index.html deleted file mode 100644 index b4aecaa..0000000 --- a/site/content/docs/5.2/examples/masonry/index.html +++ /dev/null @@ -1,105 +0,0 @@ ---- -layout: examples -title: Masonry example -extra_js: - - src: "https://cdn.jsdelivr.net/npm/masonry-layout@4.2.2/dist/masonry.pkgd.min.js" - integrity: "sha384-GNFwBvfVxBkLMJpYMOABq3c+d3KnQxudP/mGPkzpZSTYykLBNsZEnG2D9G/X/+7D" - async: true ---- - -<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"> - {{< 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"> - <figure class="p-3 mb-0"> - <blockquote class="blockquote"> - <p>A well-known quote, contained in a blockquote element.</p> - </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"> - {{< 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> - <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 text-bg-primary text-center p-3"> - <figure class="mb-0"> - <blockquote class="blockquote"> - <p>A well-known quote, contained in a blockquote element.</p> - </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"> - {{< placeholder width="100%" height="260" class="card-img" text="Card image" >}} - </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"> - <p>A well-known quote, contained in a blockquote element.</p> - </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> |