From db46bfc03f3a22752ef6bd91ae577d893872a216 Mon Sep 17 00:00:00 2001 From: Daniel Baumann Date: Sat, 24 Jun 2023 14:44:40 +0200 Subject: Merging upstream version 5.3.0+dfsg. Signed-off-by: Daniel Baumann --- site/content/docs/5.2/examples/masonry/index.html | 105 ---------------------- 1 file changed, 105 deletions(-) delete mode 100644 site/content/docs/5.2/examples/masonry/index.html (limited to 'site/content/docs/5.2/examples/masonry/index.html') 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 ---- - -
-

Bootstrap and Masonry

-

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:

- -

-<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>
-  
- -

By adding data-masonry='{"percentPosition": true }' to the .row wrapper, we can combine the powers of Bootstrap's responsive grid and Masonry's positioning.

- -
- -
-
-
- {{< placeholder width="100%" height="200" class="card-img-top" text="Image cap" >}} -
-
Card title that wraps to a new line
-

This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

-
-
-
-
-
-
-
-

A well-known quote, contained in a blockquote element.

-
- -
-
-
-
-
- {{< placeholder width="100%" height="200" class="card-img-top" text="Image cap" >}} -
-
Card title
-

This card has supporting text below as a natural lead-in to additional content.

-

Last updated 3 mins ago

-
-
-
-
-
-
-
-

A well-known quote, contained in a blockquote element.

-
- -
-
-
-
-
-
-
Card title
-

This card has a regular title and short paragraph of text below it.

-

Last updated 3 mins ago

-
-
-
-
-
- {{< placeholder width="100%" height="260" class="card-img" text="Card image" >}} -
-
-
-
-
-
-

A well-known quote, contained in a blockquote element.

-
- -
-
-
-
-
-
-
Card title
-

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

-
-
-
-
- -
-- cgit v1.2.3