diff options
| author | Shohei Yoshida <[email protected]> | 2019-09-24 19:48:45 +0900 |
|---|---|---|
| committer | XhmikosR <[email protected]> | 2019-09-24 13:48:45 +0300 |
| commit | d2a24e09ecfd453618f7bd6c07bc0546e38fb261 (patch) | |
| tree | 3092fe65bed6cea2ed67cd50fc4ca6bdba996748 | |
| parent | 04796b8f3aeb461d38fc265c1566821fc5ec299c (diff) | |
| download | bootstrap-d2a24e09ecfd453618f7bd6c07bc0546e38fb261.tar.xz bootstrap-d2a24e09ecfd453618f7bd6c07bc0546e38fb261.zip | |
Grid card example tweaks (#29409)
Stack in cards in one column when < md
| -rw-r--r-- | site/content/docs/4.3/components/card.md | 8 |
1 files changed, 4 insertions, 4 deletions
diff --git a/site/content/docs/4.3/components/card.md b/site/content/docs/4.3/components/card.md index 4c953a99a..6296c2eeb 100644 --- a/site/content/docs/4.3/components/card.md +++ b/site/content/docs/4.3/components/card.md @@ -603,10 +603,10 @@ Just like with card groups, card footers in decks will automatically line up. ### Grid cards -Use the Bootstrap grid system and its [`.row-cols` classes]({{< docsref "/layout/grid#row-columns" >}}) to control how many grid columns (wrapped around your cards) you show per row. For example, here's `.row-cols-md-2` splitting four cards to equal width across multiple rows, from the medium breakpoint up. +Use the Bootstrap grid system and its [`.row-cols` classes]({{< docsref "/layout/grid#row-columns" >}}) to control how many grid columns (wrapped around your cards) you show per row. For example, here's `.row-cols-1` laying out the cards on one column, and `.row-cols-md-2` splitting four cards to equal width across multiple rows, from the medium breakpoint up. {{< example >}} -<div class="row row-cols-md-2"> +<div class="row row-cols-1 row-cols-md-2"> <div class="col mb-4"> <div class="card"> {{< placeholder width="100%" height="140" class="card-img-top" text="Image cap" >}} @@ -649,7 +649,7 @@ Use the Bootstrap grid system and its [`.row-cols` classes]({{< docsref "/layout Change it to `.row-cols-3` and you'll see the fourth card wrap. {{< example >}} -<div class="row row-cols-md-3"> +<div class="row row-cols-1 row-cols-md-3"> <div class="col mb-4"> <div class="card"> {{< placeholder width="100%" height="140" class="card-img-top" text="Image cap" >}} @@ -692,7 +692,7 @@ Change it to `.row-cols-3` and you'll see the fourth card wrap. When you need equal height, add `.h-100` to the cards. {{< example >}} -<div class="row row-cols-md-3"> +<div class="row row-cols-1 row-cols-md-3"> <div class="col mb-4"> <div class="card h-100"> {{< placeholder width="100%" height="140" class="card-img-top" text="Image cap" >}} |