diff options
| author | Mark Otto <[email protected]> | 2015-09-06 09:36:19 -0700 |
|---|---|---|
| committer | Mark Otto <[email protected]> | 2015-09-06 09:36:19 -0700 |
| commit | 741f7d4b5a4355f8ba946804baeaead906bacf3a (patch) | |
| tree | 8ceac5b258038e73ef905a84a86fc216f283410c /docs | |
| parent | 8f16abb669c58117484ed3d13ee38ac5d20d981a (diff) | |
| download | bootstrap-741f7d4b5a4355f8ba946804baeaead906bacf3a.tar.xz bootstrap-741f7d4b5a4355f8ba946804baeaead906bacf3a.zip | |
Fixes #17486: start work on responsive cards for decks, groups, and columns
Diffstat (limited to 'docs')
| -rw-r--r-- | docs/components/card.md | 8 |
1 files changed, 6 insertions, 2 deletions
diff --git a/docs/components/card.md b/docs/components/card.md index 8f19e97ce..516367e65 100644 --- a/docs/components/card.md +++ b/docs/components/card.md @@ -112,7 +112,7 @@ Using the grid: Using custom widths: {% example html %} -<div class="card card-block" style="width: 20rem;"> +<div class="card card-block" style="width: 18rem;"> <h3 class="card-title">Special title treatment</h3> <p class="card-text">With supporting text below as a natural lead-in to additional content.</p> <a href="#" class="btn btn-primary">Go somewhere</a> @@ -295,6 +295,8 @@ Cards include their own variant classes for quickly changing the `background-col 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. +Only applies to small devices and above. + {% example html %} <div class="card-group"> <div class="card"> @@ -328,6 +330,8 @@ Use card groups to render cards as a single, attached element with equal width a 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. + **ProTip!** If you enable [flexbox mode]({{ site.baseurl }}/getting-started/flexbox/), you can remove the `.card-deck-wrapper`. {% example html %} @@ -363,7 +367,7 @@ Need a set of equal width and height cards that aren't attached to one another? ## Columns -Cards can be organized into [Masonry](http://masonry.desandro.com)-like columns with just CSS by wrapping them in `.card-columns`. +Cards can be organized into [Masonry](http://masonry.desandro.com)-like columns with just CSS by wrapping them in `.card-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/Guide/CSS/Using_multi-column_layouts). |