From b4c422340905b59aa34a0e20ca707bc06ed11ad7 Mon Sep 17 00:00:00 2001 From: Martijn Cuppens Date: Sun, 30 Jun 2019 16:59:58 +0300 Subject: Remove card columns in favor of masonry grid --- site/content/docs/4.3/components/card.md | 86 +------------------- site/content/docs/4.3/examples/masonry/index.md | 102 ++++++++++++++++++++++++ site/content/docs/4.3/migration.md | 4 + 3 files changed, 108 insertions(+), 84 deletions(-) create mode 100644 site/content/docs/4.3/examples/masonry/index.md (limited to 'site/content/docs') diff --git a/site/content/docs/4.3/components/card.md b/site/content/docs/4.3/components/card.md index 7860c5d76..99225ceec 100644 --- a/site/content/docs/4.3/components/card.md +++ b/site/content/docs/4.3/components/card.md @@ -601,88 +601,6 @@ Just like with card groups, card footers in decks will automatically line up. {{< /example >}} -### Card columns +### Card columns (Masonry layout) -Cards can be organized into [Masonry](https://masonry.desandro.com/)-like columns with just CSS by wrapping them in `.card-columns`. Cards are built with CSS `column` properties instead of flexbox for easier alignment. Cards are ordered from top to bottom and left to right. - -**Heads up!** Your mileage with card columns may vary. To prevent cards breaking across columns, we must set them to `display: inline-block` as `column-break-inside: avoid` isn't a bulletproof solution yet. - -{{< example >}} -
-
- {{< placeholder width="100%" height="160" 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.

-
-
-
-
-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

-
- - Someone famous in Source Title - -
-
-
-
- {{< placeholder width="100%" height="160" 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

-
-
-
-
-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.

-
- - Someone famous in Source Title - -
-
-
-
-
-
Card title
-

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

-

Last updated 3 mins ago

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

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

-
- - Someone famous in Source Title - -
-
-
-
-
-
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

-
-
-
-{{< /example >}} - -Card columns can also be extended and customized with some additional code. Shown below is an extension of the `.card-columns` class using the same CSS we use—CSS columns— to generate a set of responsive tiers for changing the number of columns. - -{{< highlight scss >}} -.card-columns { - @include media-breakpoint-only(lg) { - column-count: 4; - } - @include media-breakpoint-only(xl) { - column-count: 5; - } -} -{{< /highlight >}} +In `v4` we used a CSS-only technique to mimic the behaviour of [Masonry](https://masonry.desandro.com/)-like columns, but this technique came with lots of unpleasant [side effects](https://github.com/twbs/bootstrap/pull/28922). If you want to have this type of layout in `v5`, you can just make use of Masonry plugin. **Masonry is not included in Bootstrap**, but we've made a [demo example]({{< docsref "/examples/masonry" >}}) to help you get started. diff --git a/site/content/docs/4.3/examples/masonry/index.md b/site/content/docs/4.3/examples/masonry/index.md new file mode 100644 index 000000000..d03e3cc7a --- /dev/null +++ b/site/content/docs/4.3/examples/masonry/index.md @@ -0,0 +1,102 @@ +--- +layout: single +title: Bootstrap grid masonry example +description: This example illustrates how to integrate the [Masonry plugin](https://masonry.desandro.com/) with the Bootstrap grid. More options & documentation can be found on their [documentation site](https://masonry.desandro.com/). +include_docs_stylesheets: true +active_menu: "example" +extra_js: + - src: "https://cdnjs.cloudflare.com/ajax/libs/masonry/4.2.2/masonry.pkgd.min.js" + integrity: "sha256-Nn1q/fx0H7SNLZMQ5Hw5JLaTRZp0yILA/FRexe19VdI=" + async: true +--- + +Masonry is not included in Bootstrap, but can easily be added by including your locally hosted file or using the following hosted javascript file: + +```js + +``` + +By adding `data-masonry='{"percentPosition": true }'` to the `.row` wrapper, we can combine the powers of Bootstrap's responsive grid and Masonry's positioning. + +{{< example >}} +
+
+
+ {{< placeholder width="100%" height="160" 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.

+
+
+
+
+
+
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

+
+ + Someone famous in Source Title + +
+
+
+
+
+
+ {{< placeholder width="100%" height="160" 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

+
+
+
+
+
+
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.

+
+ + Someone famous in Source Title + +
+
+
+
+
+
+
+
Card title
+

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

+

Last updated 3 mins ago

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

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

+
+ + Someone famous in Source Title + +
+
+
+
+
+
+
+
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

+
+
+
+
+{{< /example >}} diff --git a/site/content/docs/4.3/migration.md b/site/content/docs/4.3/migration.md index bae7c6a51..e2bf76bb2 100644 --- a/site/content/docs/4.3/migration.md +++ b/site/content/docs/4.3/migration.md @@ -93,6 +93,10 @@ Badges were overhauled to better differentiate themselves from buttons and to be - **Todo:** Removed `.badge-pill` for the `.rounded-pill` utility class - **Todo:** Removed badge's hover and focus styles for `a.badge` and `button.badge`. +### Cards + +- Removed the card columns in favor of a Masonry grid [See #28922](https://github.com/twbs/bootstrap/pull/28922). + ### Icons (New!) - Added new Bootstrap icons to the project for our documentation, form controls, and more. -- cgit v1.2.3