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 %}
+<div class="row row-cols-2">
+  <div class="col">
+    <div class="card mb-4">
+      {% include icons/placeholder.svg 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">
+    <div class="card mb-4">
+      {% include icons/placeholder.svg 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">
+    <div class="card mb-4">
+      {% include icons/placeholder.svg 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">
+    <div class="card mb-4">
+      {% include icons/placeholder.svg 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>
+{% endcapture %}
+{% include example.html content=example %}
+
+{% capture example %}
+<div class="row row-cols-3">
+  <div class="col">
+    <div class="card mb-4">
+      {% include icons/placeholder.svg 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">
+    <div class="card mb-4">
+      {% include icons/placeholder.svg 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">
+    <div class="card mb-4">
+      {% include icons/placeholder.svg 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">
+    <div class="card mb-4">
+      {% include icons/placeholder.svg 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>
+{% 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.
+
+<div class="bd-example-row">
+{% capture 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>
+{% endcapture %}
+{% include example.html content=example %}
+</div>
+
+<div class="bd-example-row">
+{% capture 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>
+{% endcapture %}
+{% include example.html content=example %}
+</div>
+
+<div class="bd-example-row">
+{% capture 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>
+{% endcapture %}
+{% include example.html content=example %}
+</div>
+
 ## 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)