summaryrefslogtreecommitdiffstats
path: root/site/content/docs/5.2/examples/masonry/index.html
diff options
context:
space:
mode:
authorDaniel Baumann <daniel.baumann@progress-linux.org>2023-06-24 12:44:40 +0000
committerDaniel Baumann <daniel.baumann@progress-linux.org>2023-06-24 12:44:49 +0000
commitdb46bfc03f3a22752ef6bd91ae577d893872a216 (patch)
tree89d924513bc95e6bac4dc8e26f0da84caa477b7b /site/content/docs/5.2/examples/masonry/index.html
parentReleasing debian version 5.2.3+dfsg-8. (diff)
downloadbootstrap-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.html105
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>
-&lt;script src=&quot;https://cdn.jsdelivr.net/npm/masonry-layout@4.2.2/dist/masonry.pkgd.min.js&quot; integrity=&quot;sha384-GNFwBvfVxBkLMJpYMOABq3c+d3KnQxudP/mGPkzpZSTYykLBNsZEnG2D9G/X/+7D&quot; crossorigin=&quot;anonymous&quot; async&gt;&lt;/script&gt;
- </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>