From: Gaël Poupard <ffoodd@users.noreply.github.com>
Date: Fri, 29 May 2020 15:01:40 +0000 (+0200)
Subject: docs(cards): fix card-img-bottom example (#30925)
X-Git-Tag: v4.5.1~55
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=6f4d9fff029a2a285c7cdee749bd7e21ae2c4b18;p=thirdparty%2Fbootstrap.git

docs(cards): fix card-img-bottom example (#30925)
---

diff --git a/site/docs/4.5/components/card.md b/site/docs/4.5/components/card.md
index 8183961273..b234eeaa5a 100644
--- a/site/docs/4.5/components/card.md
+++ b/site/docs/4.5/components/card.md
@@ -356,9 +356,28 @@ Cards include a few options for working with images. Choose from appending "imag
 
 Similar to headers and footers, cards can include top and bottom "image caps"—images at the top or bottom of a card.
 
-{% capture example %}
+<div class="bd-example">
+  <div class="card mb-3">
+    {% include icons/placeholder.svg width="100%" height="180" 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 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 class="card">
+    <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>
+    {% include icons/placeholder.svg width="100%" height="180" class="card-img-bottom" text="Image cap" %}
+  </div>
+</div>
+
+{% highlight html %}
 <div class="card mb-3">
-  {% include icons/placeholder.svg width="100%" height="180" class="card-img-top" text="Image cap" %}
+  <img src="..." class="card-img-top" alt="...">
   <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>
@@ -371,10 +390,9 @@ Similar to headers and footers, cards can include top and bottom "image caps"—
     <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>
-  {% include icons/placeholder.svg width="100%" height="180" class="card-img-bottom" text="Image cap" %}
+  <img src="..." class="card-img-bottom" alt="...">
 </div>
-{% endcapture %}
-{% include example.html content=example %}
+{% endhighlight %}
 
 ### Image overlays