diff options
| author | Mark Otto <[email protected]> | 2016-12-22 16:46:10 -0800 |
|---|---|---|
| committer | Mark Otto <[email protected]> | 2016-12-22 16:46:10 -0800 |
| commit | cba7b510815c23d55f25c01300c21191b194b1a7 (patch) | |
| tree | 19a2f58f7cb90e1858708d482af5a35d4208acff /docs/components | |
| parent | 5692406a11a0753035773e9e93bd2eebecc910d6 (diff) | |
| download | bootstrap-cba7b510815c23d55f25c01300c21191b194b1a7.tar.xz bootstrap-cba7b510815c23d55f25c01300c21191b194b1a7.zip | |
redo subheadings and organization of card layout options
Diffstat (limited to 'docs/components')
| -rw-r--r-- | docs/components/card.md | 11 |
1 files changed, 6 insertions, 5 deletions
diff --git a/docs/components/card.md b/docs/components/card.md index e3c89e6c3..77f41ca57 100644 --- a/docs/components/card.md +++ b/docs/components/card.md @@ -489,11 +489,13 @@ In need of a colored card, but not the hefty background colors they bring? Repla </div> {% endexample %} -## Groups +## Card layout -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. +In addition to styling the content within cards, Bootstrap includes a few options for laying out series of cards. For the time being, **these layout options are not yet responsive**. -Only applies to small devices and above. +### Card groups + +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. {% example html %} <div class="card-group"> @@ -524,9 +526,8 @@ Only applies to small devices and above. </div> {% endexample %} -## Decks +When using card groups with footers, their content will automatically line up. -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`. Only applies to small devices and above. |
