mirrors/bootstrap
2
0
Fork 0
mirror of https://github.com/tenrok/bootstrap.git synced 2026-06-11 18:02:28 +03:00
Code Activity

Use the example shortcode in more places

Browse Source 
Now, it's safe to do use it since it covers more cases
This commit is contained in:
XhmikosR
2020-11-13 13:10:29 +02:00
parent 764184fc43
commit 052f72d360
4 changed files with 62 additions and 176 deletions
Download Patch File Download Diff File Expand all files Collapse all files
site/content/docs/4.5/components/card.md
+4 -23
View File
@@ -352,28 +352,9 @@ 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.
<div class="bd-example">
<div class="card mb-3">
{{< placeholder 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>
{{< placeholder width="100%" height="180" class="card-img-bottom" text="Image cap" >}}
</div>
</div>
```html
{{< example >}}
<div class="card mb-3">
<img src="..." class="card-img-top" alt="...">
{{< placeholder 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>
@@ -386,9 +367,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>
<img src="..." class="card-img-bottom" alt="...">
{{< placeholder width="100%" height="180" class="card-img-bottom" text="Image cap" >}}
</div>
```
{{< /example >}}
### Image overlays