diff options
| -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" >}} |