From d2a24e09ecfd453618f7bd6c07bc0546e38fb261 Mon Sep 17 00:00:00 2001
From: Shohei Yoshida <ysds.code@gmail.com>
Date: Tue, 24 Sep 2019 19:48:45 +0900
Subject: [PATCH] Grid card example tweaks (#29409)
Stack in cards in one column when < md
---
site/content/docs/4.3/components/card.md | 8 ++++----
1 file 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 4c953a99a3..6296c2eeb7 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" >}}
--
GitLab