diff --git a/scss/_variables.scss b/scss/_variables.scss
index 850344aac0943cf7bf872f840fd7f6672a140162..e5b1a797dff2fa28c83254a038b95dd9ff5547fd 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -215,6 +215,7 @@ $container-max-widths: (
$grid-columns: 12 !default;
$grid-gutter-width: 30px !default;
+$grid-row-columns: 6 !default;
// Container padding
diff --git a/scss/mixins/_grid-framework.scss b/scss/mixins/_grid-framework.scss
index 9aeafc06eaae1881c72157add47f54a59d348281..567c04a73ec404e9d670aeff100feaf37d7b9733 100644
--- a/scss/mixins/_grid-framework.scss
+++ b/scss/mixins/_grid-framework.scss
@@ -33,6 +33,13 @@
flex-grow: 1;
max-width: 100%;
}
+
+ @for $i from 1 through $grid-row-columns {
+ .row-cols#{$infix}-#{$i} {
+ @include row-cols($i);
+ }
+ }
+
.col#{$infix}-auto {
flex: 0 0 auto;
width: auto;
diff --git a/scss/mixins/_grid.scss b/scss/mixins/_grid.scss
index b85e31bc081e3254334f2a6113bc0847d5319202..5918df1af30ec268efeabe2e84252552c425d46e 100644
--- a/scss/mixins/_grid.scss
+++ b/scss/mixins/_grid.scss
@@ -49,3 +49,15 @@
$num: $size / $columns;
margin-left: if($num == 0, 0, percentage($num));
}
+
+// Row columns
+//
+// Specify on a parent element(e.g., .row) to force immediate children into NN
+// numberof columns. Supports wrapping to new lines, but does not do a Masonry
+// style grid.
+@mixin row-cols($count) {
+ & > * {
+ flex: 0 0 100% / $count;
+ max-width: 100% / $count;
+ }
+}
diff --git a/site/content/docs/4.3/components/card.md b/site/content/docs/4.3/components/card.md
index a3b64dc5714e5d9d39fd259c0e23666b3c32b30f..7efbd616397db3262f9aef87fc54d071e695a38f 100644
--- a/site/content/docs/4.3/components/card.md
+++ b/site/content/docs/4.3/components/card.md
@@ -601,6 +601,137 @@ Just like with card groups, card footers in decks will automatically line up.
</div>
{{< /example >}}
-### Card columns (Masonry layout)
+### Grid cards
+
+Use the Bootstrap grid system and its [`.row-cols` classes]({{< docsref "/layout/grid#row-columns" >}}) to control how many grid columns (wrapped around your cards) you show per row. For example, here's `.row-cols-md-2` splitting four cards to equal width across multiple rows, from the medium breakpoint up.
+
+{{< example >}}
+<div class="row row-cols-md-2">
+ <div class="col mb-4">
+ <div class="card">
+ {{< placeholder width="100%" height="140" class="card-img-top" text="Image cap" >}}
+ <div class="card-body">
+ <h5 class="card-title">Card title</h5>
+ <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
+ </div>
+ </div>
+ </div>
+ <div class="col mb-4">
+ <div class="card">
+ {{< placeholder width="100%" height="140" class="card-img-top" text="Image cap" >}}
+ <div class="card-body">
+ <h5 class="card-title">Card title</h5>
+ <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
+ </div>
+ </div>
+ </div>
+ <div class="col mb-4">
+ <div class="card">
+ {{< placeholder width="100%" height="140" class="card-img-top" text="Image cap" >}}
+ <div class="card-body">
+ <h5 class="card-title">Card title</h5>
+ <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
+ </div>
+ </div>
+ </div>
+ <div class="col mb-4">
+ <div class="card">
+ {{< placeholder width="100%" height="140" class="card-img-top" text="Image cap" >}}
+ <div class="card-body">
+ <h5 class="card-title">Card title</h5>
+ <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
+ </div>
+ </div>
+ </div>
+</div>
+{{< /example >}}
+
+Change it to `.row-cols-3` and you'll see the fourth card wrap.
+
+{{< example >}}
+<div class="row row-cols-md-3">
+ <div class="col mb-4">
+ <div class="card">
+ {{< placeholder width="100%" height="140" class="card-img-top" text="Image cap" >}}
+ <div class="card-body">
+ <h5 class="card-title">Card title</h5>
+ <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
+ </div>
+ </div>
+ </div>
+ <div class="col mb-4">
+ <div class="card">
+ {{< placeholder width="100%" height="140" class="card-img-top" text="Image cap" >}}
+ <div class="card-body">
+ <h5 class="card-title">Card title</h5>
+ <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
+ </div>
+ </div>
+ </div>
+ <div class="col mb-4">
+ <div class="card">
+ {{< placeholder width="100%" height="140" class="card-img-top" text="Image cap" >}}
+ <div class="card-body">
+ <h5 class="card-title">Card title</h5>
+ <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
+ </div>
+ </div>
+ </div>
+ <div class="col mb-4">
+ <div class="card">
+ {{< placeholder width="100%" height="140" class="card-img-top" text="Image cap" >}}
+ <div class="card-body">
+ <h5 class="card-title">Card title</h5>
+ <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
+ </div>
+ </div>
+ </div>
+</div>
+{{< /example >}}
+
+When you need equal height, add `.h-100` to the cards.
+
+{{< example >}}
+<div class="row row-cols-md-3">
+ <div class="col mb-4">
+ <div class="card h-100">
+ {{< placeholder width="100%" height="140" class="card-img-top" text="Image cap" >}}
+ <div class="card-body">
+ <h5 class="card-title">Card title</h5>
+ <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
+ </div>
+ </div>
+ </div>
+ <div class="col mb-4">
+ <div class="card h-100">
+ {{< placeholder width="100%" height="140" class="card-img-top" text="Image cap" >}}
+ <div class="card-body">
+ <h5 class="card-title">Card title</h5>
+ <p class="card-text">This is a short card.</p>
+ </div>
+ </div>
+ </div>
+ <div class="col mb-4">
+ <div class="card h-100">
+ {{< placeholder width="100%" height="140" class="card-img-top" text="Image cap" >}}
+ <div class="card-body">
+ <h5 class="card-title">Card title</h5>
+ <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
+ </div>
+ </div>
+ </div>
+ <div class="col mb-4">
+ <div class="card h-100">
+ {{< placeholder width="100%" height="140" class="card-img-top" text="Image cap" >}}
+ <div class="card-body">
+ <h5 class="card-title">Card title</h5>
+ <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
+ </div>
+ </div>
+ </div>
+</div>
+{{< /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 9ea65e80714239ffffc4b31e996f51437049e379..2245dbe54f1b499f40c978bc051c6447e688b2f4 100644
--- a/site/content/docs/4.3/layout/grid.md
+++ b/site/content/docs/4.3/layout/grid.md
@@ -324,6 +324,91 @@ Here's an example of customizing the Bootstrap grid at the large (`lg`) breakpoi
</div>
{{< /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.
+
+<div class="bd-example-row">
+{{< example >}}
+<div class="container">
+ <div class="row row-cols-2">
+ <div class="col">Column</div>
+ <div class="col">Column</div>
+ <div class="col">Column</div>
+ <div class="col">Column</div>
+ </div>
+</div>
+{{< /example >}}
+</div>
+
+<div class="bd-example-row">
+{{< example >}}
+<div class="container">
+ <div class="row row-cols-3">
+ <div class="col">Column</div>
+ <div class="col">Column</div>
+ <div class="col">Column</div>
+ <div class="col">Column</div>
+ </div>
+</div>
+{{< /example >}}
+</div>
+
+<div class="bd-example-row">
+{{< example >}}
+<div class="container">
+ <div class="row row-cols-4">
+ <div class="col">Column</div>
+ <div class="col">Column</div>
+ <div class="col">Column</div>
+ <div class="col">Column</div>
+ </div>
+</div>
+{{< /example >}}
+</div>
+
+<div class="bd-example-row">
+{{< example >}}
+<div class="container">
+ <div class="row row-cols-4">
+ <div class="col">Column</div>
+ <div class="col">Column</div>
+ <div class="col-6">Column</div>
+ <div class="col">Column</div>
+ </div>
+</div>
+{{< /example >}}
+</div>
+
+<div class="bd-example-row">
+{{< example >}}
+<div class="container">
+ <div class="row row-cols-1 row-cols-sm-2 row-cols-md-4">
+ <div class="col">Column</div>
+ <div class="col">Column</div>
+ <div class="col">Column</div>
+ <div class="col">Column</div>
+ </div>
+</div>
+{{< /example >}}
+</div>
+
+You can also use the accompanying Sass mixin, `row-cols()`:
+
+{{< highlight scss >}}
+.element {
+ // Three columns to start
+ @include row-cols(3);
+
+ // Five columns from medium breakpoint up
+ @include media-breakpoint-up(md) {
+ @include row-cols(5);
+ }
+}
+{{< /highlight >}}
+
## 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)