Add horizontal card example (#27906)

diff --git a/site/docs/4.2/components/card.md b/site/docs/4.2/components/card.md
index 221c9da54a9ff2d6e1798b0523eb44a042a108e0..fa9c6ffc151bfb0d66b2a4a78a4ad549c66140a9 100644 (file)
--- a/site/docs/4.2/components/card.md
+++ b/site/docs/4.2/components/card.md
@@ -397,6 +397,28 @@ Note that content should not be larger than the height of the image. If content
 {% endcapture %}
 {% include callout.html content=callout type="info" %}
 
+## Horizontal
+
+Using a combination of grid and utility classes, cards can be made horizontal in a mobile-friendly and responsive way. In the example below, we remove the grid gutters with `.no-gutters` and use `.col-md-*` classes to make the card horizontal at the `md` breakpoint. Further adjustments may be needed depending on your card content.
+
+{% capture example %}
+<div class="card mb-3" style="max-width: 540px;">
+  <div class="row no-gutters">
+    <div class="col-md-4">
+      {% include icons/placeholder.svg width="100%" height="250" class="" text="Image" %}
+    </div>
+    <div class="col-md-8">
+      <div class="card-body">
+        <h5 class="card-title">Card title</h5>
+        <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
+        <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
+      </div>
+    </div>
+  </div>
+</div>
+{% endcapture %}
+{% include example.html content=example %}
+
 ## Card styles
 
 Cards include various options for customizing their backgrounds, borders, and color.