diff options
| author | Mark Otto <[email protected]> | 2016-12-22 16:46:29 -0800 |
|---|---|---|
| committer | Mark Otto <[email protected]> | 2016-12-22 16:46:29 -0800 |
| commit | 433df0c67e0d480f3852924a47994149a8a4c5b6 (patch) | |
| tree | 2b323409e425261b5527a1faf40ad44a6c273003 /docs/components | |
| parent | cba7b510815c23d55f25c01300c21191b194b1a7 (diff) | |
| download | bootstrap-433df0c67e0d480f3852924a47994149a8a4c5b6.tar.xz bootstrap-433df0c67e0d480f3852924a47994149a8a4c5b6.zip | |
add aligned footer example
Diffstat (limited to 'docs/components')
| -rw-r--r-- | docs/components/card.md | 34 |
1 files changed, 34 insertions, 0 deletions
diff --git a/docs/components/card.md b/docs/components/card.md index 77f41ca57..6fa30a9f6 100644 --- a/docs/components/card.md +++ b/docs/components/card.md @@ -528,6 +528,40 @@ Use card groups to render cards as a single, attached element with equal width a When using card groups with footers, their content will automatically line up. +{% example html %} +<div class="card-group"> + <div class="card"> + <img class="card-img-top" data-src="holder.js/100px180/" alt="Card image cap"> + <div class="card-block"> + <h4 class="card-title">Card title</h4> + <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> + </div> + <div class="card-footer"> + <small class="text-muted">Last updated 3 mins ago</small> + </div> + </div> + <div class="card"> + <img class="card-img-top" data-src="holder.js/100px180/" alt="Card image cap"> + <div class="card-block"> + <h4 class="card-title">Card title</h4> + <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p> + </div> + <div class="card-footer"> + <small class="text-muted">Last updated 3 mins ago</small> + </div> + </div> + <div class="card"> + <img class="card-img-top" data-src="holder.js/100px180/" alt="Card image cap"> + <div class="card-block"> + <h4 class="card-title">Card title</h4> + <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p> + </div> + <div class="card-footer"> + <small class="text-muted">Last updated 3 mins ago</small> + </div> + </div> +</div> +{% endexample %} Only applies to small devices and above. |