From 5070d44c8ac772d650d90a674f32077cbe339865 Mon Sep 17 00:00:00 2001
From: Mark Otto <markdotto@gmail.com>
Date: Sat, 22 Dec 2018 13:21:48 -0800
Subject: [PATCH] Add horizontal card example

---
 site/docs/4.2/components/card.md | 22 ++++++++++++++++++++++
 1 file changed, 22 insertions(+)

diff --git a/site/docs/4.2/components/card.md b/site/docs/4.2/components/card.md
index 221c9da54a9f..fa9c6ffc151b 100644
--- 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.