mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-21 12:51:52 +02:00
Code Issues Releases Wiki Activity

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

Browse Source
This commit is contained in:
Gaël Poupard
2020-05-29 17:01:40 +02:00
committed by GitHub
parent daa01aacb5
commit 6f4d9fff02
1 changed files with 23 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
site/docs/4.5/components/card.md
View File

@@ -356,7 +356,7 @@ 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">
@@ -373,8 +373,26 @@ Similar to headers and footers, cards can include top and bottom "image caps"—
</div>
{% include icons/placeholder.svg width="100%" height="180" class="card-img-bottom" text="Image cap" %}
</div>
{% endcapture %}
{% include example.html content=example %}
</div>
{% highlight html %}
<div class="card mb-3">
<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>
<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>
<img src="..." class="card-img-bottom" alt="...">
</div>
{% endhighlight %}
### Image overlays