diff options
| author | Mark Otto <[email protected]> | 2016-12-22 16:47:10 -0800 |
|---|---|---|
| committer | Mark Otto <[email protected]> | 2016-12-22 16:47:10 -0800 |
| commit | ce35655f5fbea77745b5f9ca76c390e6abb9711c (patch) | |
| tree | 08ef5403aa3ceec5d702d0935bc44b8cf2d5fa2b /docs/components | |
| parent | 433df0c67e0d480f3852924a47994149a8a4c5b6 (diff) | |
| download | bootstrap-ce35655f5fbea77745b5f9ca76c390e6abb9711c.tar.xz bootstrap-ce35655f5fbea77745b5f9ca76c390e6abb9711c.zip | |
card deck footer example
Diffstat (limited to 'docs/components')
| -rw-r--r-- | docs/components/card.md | 39 |
1 files changed, 38 insertions, 1 deletions
diff --git a/docs/components/card.md b/docs/components/card.md index 6fa30a9f6..c96305409 100644 --- a/docs/components/card.md +++ b/docs/components/card.md @@ -563,7 +563,9 @@ When using card groups with footers, their content will automatically line up. </div> {% endexample %} -Only applies to small devices and above. +### Card decks + +Need a set of equal width and height cards that aren't attached to one another? Use card decks. By default, card decks require two wrapping elements: `.card-deck-wrapper` and a `.card-deck`. We use table styles for the sizing and the gutters on `.card-deck`. The `.card-deck-wrapper` is used to negative margin out the `border-spacing` on the `.card-deck`. {% example html %} <div class="card-deck"> @@ -595,8 +597,43 @@ Only applies to small devices and above. {% endexample %} ## Columns +Just like with card groups, card footers in decks will automatically line up. Cards can be organized into [Masonry](http://masonry.desandro.com)-like columns with just CSS by wrapping them in `.card-columns`. Cards are ordered from top to bottom and left to right when wrapped in `.card-columns`. +{% example html %} +<div class="card-deck"> + <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. |