Move margins, and equal height via utility example

site/content/docs/4.3/components/card.md

@@ -603,12 +603,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]({{< 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-2">
-  <div class="col">
-    <div class="card mb-4">
+<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>
@@ -616,8 +616,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">
       {{< placeholder width="100%" height="140" class="card-img-top" text="Image cap" >}}
       <div class="card-body">
         <h5 class="card-title">Card title</h5>
@@ -625,8 +625,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">
       {{< placeholder width="100%" height="140" class="card-img-top" text="Image cap" >}}
       <div class="card-body">
         <h5 class="card-title">Card title</h5>
@@ -634,8 +634,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">
       {{< placeholder width="100%" height="140" class="card-img-top" text="Image cap" >}}
       <div class="card-body">
         <h5 class="card-title">Card title</h5>
@@ -646,10 +646,12 @@ Use the Bootstrap grid system and its [`.rol-cols` classes]() to control how man
 </div>
 {{< /example >}}
 
+Change it to `.row-cols-3` and you'll see the fourth card wrap.
+
 {{< 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">
       {{< placeholder width="100%" height="140" class="card-img-top" text="Image cap" >}}
       <div class="card-body">
         <h5 class="card-title">Card title</h5>
@@ -657,8 +659,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">
       {{< placeholder width="100%" height="140" class="card-img-top" text="Image cap" >}}
       <div class="card-body">
         <h5 class="card-title">Card title</h5>
@@ -666,8 +668,51 @@ 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">
+      {{< 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>
@@ -675,8 +720,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">
       {{< placeholder width="100%" height="140" class="card-img-top" text="Image cap" >}}
       <div class="card-body">
         <h5 class="card-title">Card title</h5>