diff --git a/scss/_card.scss b/scss/_card.scss index f68855c56c..9385859262 100644 --- a/scss/_card.scss +++ b/scss/_card.scss @@ -175,6 +175,18 @@ } } +$row-columns: 6 !default; + +@each $breakpoint in map-keys($grid-breakpoints) { + $infix: breakpoint-infix($breakpoint, $grid-breakpoints); + + @for $i from 1 through $row-columns { + .row-cols#{$infix}-#{$i} > [class^="col"] { + flex: 0 0 calc(100% / #{$i}); + } + } +} + // // Card groups diff --git a/site/content/docs/4.3/components/card.md b/site/content/docs/4.3/components/card.md index a3b64dc571..4f789fc6fd 100644 --- a/site/content/docs/4.3/components/card.md +++ b/site/content/docs/4.3/components/card.md @@ -601,6 +601,92 @@ Just like with card groups, card footers in decks will automatically line up. {{< /example >}} -### Card columns (Masonry layout) +### Grid cards + +Use the Bootstrap grid system and its [`.rol-cols` classes]() to control how many grid columns (wrapped around your cards) you show per row. + +{{< example >}} +
+
+
+ {{< placeholder width="100%" height="140" class="card-img-top" text="Image cap" >}} +
+
Card title
+

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

+
+
+
+
+{{< /example >}} + +### Masonry In `v4` we used a CSS-only technique to mimic the behavior 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/layout/grid.md b/site/content/docs/4.3/layout/grid.md index 9ea65e8071..372f68e738 100644 --- a/site/content/docs/4.3/layout/grid.md +++ b/site/content/docs/4.3/layout/grid.md @@ -324,6 +324,51 @@ Here's an example of customizing the Bootstrap grid at the large (`lg`) breakpoi {{< /example >}} +### Row columns + +Use the responsive `.row-cols-*` classes to quickly set the number of columns that best render your content and layout. Whereas normal `.col-*` classes apply to the individual columns (e.g., `.col-md-4`), the row columns classes are set on the parent `.row` as a shortcut. + +Use these row columns classes to quickly create basic grid layouts or to control your card layouts. + +
+{{< example >}} +
+
+
Column
+
Column
+
Column
+
Column
+
+
+{{< /example >}} +
+ +
+{{< example >}} +
+
+
Column
+
Column
+
Column
+
Column
+
+
+{{< /example >}} +
+ +
+{{< example >}} +
+
+
Column
+
Column
+
Column
+
Column
+
+
+{{< /example >}} +
+ ## Alignment Use flexbox alignment utilities to vertically and horizontally align columns. **Internet Explorer 10-11 do not support vertical alignment of flex items when the flex container has a `min-height` as shown below.** [See Flexbugs #3 for more details.](https://github.com/philipwalton/flexbugs#flexbug-3)