rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2024-12-02 14:24:19 +01:00
Code Issues Actions Packages Releases Activity

redo subheadings and organization of card layout options

Browse Source
This commit is contained in:
Mark Otto 2016-12-22 16:46:10 -08:00
parent 5692406a11
commit cba7b51081
1 changed files with 6 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
docs/components/card.md
View File

@ -489,12 +489,14 @@ In need of a colored card, but not the hefty background colors they bring? Repla
</div> </div>
{% endexample %} {% endexample %}
## Groups ## Card layout
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**.
### 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. 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.
{% example html %} {% example html %}
<div class="card-group"> <div class="card-group">
<div class="card"> <div class="card">
@ -524,9 +526,8 @@ Only applies to small devices and above.
</div> </div>
{% endexample %} {% 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. Only applies to small devices and above.