diff --git a/scss/_card.scss b/scss/_card.scss index fdbe95f404..5cca2ae283 100644 --- a/scss/_card.scss +++ b/scss/_card.scss @@ -168,6 +168,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/docs/4.3/components/card.md b/site/docs/4.3/components/card.md index fa9c6ffc15..7d04f45161 100644 --- a/site/docs/4.3/components/card.md +++ b/site/docs/4.3/components/card.md @@ -621,6 +621,94 @@ Just like with card groups, card footers in decks will automatically line up. {% endcapture %} {% include example.html content=example %} +### 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. + +{% capture example %} +
+
+
+ {% include icons/placeholder.svg 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.

+
+
+
+
+
+ {% include icons/placeholder.svg 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.

+
+
+
+
+
+ {% include icons/placeholder.svg 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.

+
+
+
+
+
+ {% include icons/placeholder.svg 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.

+
+
+
+
+{% endcapture %} +{% include example.html content=example %} + +{% capture example %} +
+
+
+ {% include icons/placeholder.svg 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.

+
+
+
+
+
+ {% include icons/placeholder.svg 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.

+
+
+
+
+
+ {% include icons/placeholder.svg 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.

+
+
+
+
+
+ {% include icons/placeholder.svg 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.

+
+
+
+
+{% endcapture %} +{% include example.html content=example %} + ### Card columns 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. diff --git a/site/docs/4.3/layout/grid.md b/site/docs/4.3/layout/grid.md index f214841ccd..f03808044c 100644 --- a/site/docs/4.3/layout/grid.md +++ b/site/docs/4.3/layout/grid.md @@ -333,6 +333,54 @@ Here's an example of customizing the Bootstrap grid at the large (`lg`) breakpoi {% endcapture %} {% include example.html content=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. + +
+{% capture example %} +
+
+
Column
+
Column
+
Column
+
Column
+
+
+{% endcapture %} +{% include example.html content=example %} +
+ +
+{% capture example %} +
+
+
Column
+
Column
+
Column
+
Column
+
+
+{% endcapture %} +{% include example.html content=example %} +
+ +
+{% capture example %} +
+
+
Column
+
Column
+
Column
+
Column
+
+
+{% endcapture %} +{% include example.html content=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)