1 files changed, 37 insertions, 5 deletions
diff --git a/vendor/twbs/bootstrap/site/docs/4.5/components/card.md b/vendor/twbs/bootstrap/site/docs/4.5/components/card.md
index 818396127..18e1c0fab 100644
--- a/vendor/twbs/bootstrap/site/docs/4.5/components/card.md
+++ b/vendor/twbs/bootstrap/site/docs/4.5/components/card.md
@@ -107,6 +107,20 @@ Create lists of content in a card with a flush list group.
 {% endcapture %}
 {% include example.html content=example %}
 
+{% capture example %}
+<div class="card" style="width: 18rem;">
+  <ul class="list-group list-group-flush">
+    <li class="list-group-item">Cras justo odio</li>
+    <li class="list-group-item">Dapibus ac facilisis in</li>
+    <li class="list-group-item">Vestibulum at eros</li>
+  </ul>
+  <div class="card-footer">
+    Card footer
+  </div>
+</div>
+{% endcapture %}
+{% include example.html content=example %}
+
 ### Kitchen sink
 
 Mix and match multiple content types to create the card you need, or throw everything in there. Shown below are image styles, blocks, text styles, and a list group—all wrapped in a fixed-width card.
@@ -356,9 +370,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 +404,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