diff options
Diffstat (limited to 'docs/components/card.md')
| -rw-r--r-- | docs/components/card.md | 50 |
1 files changed, 22 insertions, 28 deletions
diff --git a/docs/components/card.md b/docs/components/card.md index efce231ce..8dfc8c861 100644 --- a/docs/components/card.md +++ b/docs/components/card.md @@ -435,7 +435,7 @@ In need of a colored card, but not the hefty background colors they bring? Repla ## Groups -Use card groups to render cards as a single, attached element with equal width and height columns. By default, card groups use `display: table;` and `table-layout: fixed;` to achieve their uniform sizing. However, enabling [flexbox mode]({{ site.baseurl }}/getting-started/flexbox/) can switch that to use `display: flex;` and provide the same effect. +Use card groups to render cards as a single, attached element with equal width and height columns. Card groups use `display: flex;` to achieve their uniform sizing. Only applies to small devices and above. @@ -474,34 +474,30 @@ Need a set of equal width and height cards that aren't attached to one another? Only applies to small devices and above. -**ProTip!** If you enable [flexbox mode]({{ site.baseurl }}/getting-started/flexbox/), you can remove the `.card-deck-wrapper`. - {% example html %} -<div class="card-deck-wrapper"> - <div class="card-deck"> - <div class="card"> - <img class="card-img-top" data-src="holder.js/100px200/" alt="Card image cap"> - <div class="card-block"> - <h4 class="card-title">Card title</h4> - <p class="card-text">This is a longer 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 class="card-deck"> + <div class="card"> + <img class="card-img-top" data-src="holder.js/100px200/" alt="Card image cap"> + <div class="card-block"> + <h4 class="card-title">Card title</h4> + <p class="card-text">This is a longer 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 class="card"> - <img class="card-img-top" data-src="holder.js/100px200/" 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> - <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p> - </div> + </div> + <div class="card"> + <img class="card-img-top" data-src="holder.js/100px200/" 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> + <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p> </div> - <div class="card"> - <img class="card-img-top" data-src="holder.js/100px200/" 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> - <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p> - </div> + </div> + <div class="card"> + <img class="card-img-top" data-src="holder.js/100px200/" 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> + <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p> </div> </div> </div> @@ -513,8 +509,6 @@ Cards can be organized into [Masonry](http://masonry.desandro.com)-like columns Only applies to small devices and above. -**Heads up!** This is **not available in IE9 and below** as they have no support for the [`column-*` CSS properties](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Columns/Using_multi-column_layouts). - {% example html %} <div class="card-columns"> <div class="card"> |