Move margins, and equal height via utility example

1 files changed, 65 insertions, 19 deletions

diff --git a/site/docs/4.3/components/card.md b/site/docs/4.3/components/card.md
index 7d04f45161..3e2e12db5f 100644
--- a/site/docs/4.3/components/card.md
+++ b/site/docs/4.3/components/card.md
@@ -623,12 +623,12 @@ Just like with card groups, card footers in decks will automatically line up.
 
 ### 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.
+Use the Bootstrap grid system and its [`.row-cols` classes]({{ site.baseurl }}/docs/{{ site.docs_version }}/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.
 
 {% capture example %}
-<div class="row row-cols-2">
-  <div class="col">
-    <div class="card mb-4">
+<div class="row row-cols-md-2">
+  <div class="col mb-4">
+    <div class="card">
       {% 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>
@@ -636,8 +636,8 @@ Use the Bootstrap grid system and its [`.rol-cols` classes]() to control how man
       </div>
     </div>
   </div>
-  <div class="col">
-    <div class="card mb-4">
+  <div class="col mb-4">
+    <div class="card">
       {% 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>
@@ -645,8 +645,8 @@ Use the Bootstrap grid system and its [`.rol-cols` classes]() to control how man
       </div>
     </div>
   </div>
-  <div class="col">
-    <div class="card mb-4">
+  <div class="col mb-4">
+    <div class="card">
       {% 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>
@@ -654,8 +654,8 @@ Use the Bootstrap grid system and its [`.rol-cols` classes]() to control how man
       </div>
     </div>
   </div>
-  <div class="col">
-    <div class="card mb-4">
+  <div class="col mb-4">
+    <div class="card">
       {% 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>
@@ -667,10 +667,39 @@ Use the Bootstrap grid system and its [`.rol-cols` classes]() to control how man
 {% endcapture %}
 {% include example.html content=example %}
 
+Change it to `.row-cols-3` and you'll see the fourth card wrap.
+
 {% capture example %}
-<div class="row row-cols-3">
-  <div class="col">
-    <div class="card mb-4">
+<div class="row row-cols-md-3">
+  <div class="col mb-4">
+    <div class="card">
+      {% 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 mb-4">
+    <div class="card">
+      {% 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 mb-4">
+    <div class="card">
+      {% 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 mb-4">
+    <div class="card">
       {% 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>
@@ -678,8 +707,16 @@ Use the Bootstrap grid system and its [`.rol-cols` classes]() to control how man
       </div>
     </div>
   </div>
-  <div class="col">
-    <div class="card mb-4">
+</div>
+{% endcapture %}
+{% include example.html content=example %}
+
+When you need equal height, add `.h-100` to the cards.
+
+{% capture example %}
+<div class="row row-cols-md-3">
+  <div class="col mb-4">
+    <div class="card h-100">
       {% 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>
@@ -687,8 +724,17 @@ Use the Bootstrap grid system and its [`.rol-cols` classes]() to control how man
       </div>
     </div>
   </div>
-  <div class="col">
-    <div class="card mb-4">
+  <div class="col mb-4">
+    <div class="card h-100">
+      {% 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 short card.</p>
+      </div>
+    </div>
+  </div>
+  <div class="col mb-4">
+    <div class="card h-100">
       {% 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>
@@ -696,8 +742,8 @@ Use the Bootstrap grid system and its [`.rol-cols` classes]() to control how man
       </div>
     </div>
   </div>
-  <div class="col">
-    <div class="card mb-4">
+  <div class="col mb-4">
+    <div class="card h-100">
       {% 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>