diff --git a/scss/_card.scss b/scss/_card.scss index 0369bb3876..f68855c56c 100644 --- a/scss/_card.scss +++ b/scss/_card.scss @@ -241,29 +241,6 @@ } -// -// Columns -// - -.card-columns { - .card { - margin-bottom: $card-columns-margin; - } - - @include media-breakpoint-up(sm) { - column-count: $card-columns-count; - column-gap: $card-columns-gap; - orphans: 1; - widows: 1; - - .card { - display: inline-block; // Don't let them vertically span multiple columns - width: 100%; // Don't let their width change - } - } -} - - // // Accordion // diff --git a/scss/_variables.scss b/scss/_variables.scss index bc429a2d69..f6eb41910b 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -841,10 +841,6 @@ $card-img-overlay-padding: 1.25rem !default; $card-group-margin: $grid-gutter-width / 2 !default; $card-deck-margin: $card-group-margin !default; -$card-columns-count: 3 !default; -$card-columns-gap: 1.25rem !default; -$card-columns-margin: $card-spacer-y !default; - // Tooltips diff --git a/site/content/docs/4.3/components/card.md b/site/content/docs/4.3/components/card.md index 7860c5d76e..99225ceece 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 >}} -
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.
- -
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.
- -
This card has a regular title and short paragraphy of text below it.
-Last updated 3 mins ago
---Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
- -
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
-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.
+ +
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.
+ +
This card has a regular title and short paragraphy of text below it.
+Last updated 3 mins ago
+++Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
+ +
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
+