diff options
| author | Shohei Yoshida <[email protected]> | 2019-09-24 19:48:45 +0900 |
|---|---|---|
| committer | XhmikosR <[email protected]> | 2019-09-26 18:37:07 +0300 |
| commit | b5ba078b120af87571cdd080ec4523dffec7f4db (patch) | |
| tree | 4b7d79c3f3a52fef9199e01ca5f6bf00392fab8e | |
| parent | cdfba0be4a31ec82b3dd0ce1b464dfc3e1e43e2f (diff) | |
| download | bootstrap-b5ba078b120af87571cdd080ec4523dffec7f4db.tar.xz bootstrap-b5ba078b120af87571cdd080ec4523dffec7f4db.zip | |
Grid card example tweaks (#29409)
Stack in cards in one column when < md
| -rw-r--r-- | site/docs/4.3/components/card.md | 8 |
1 files changed, 4 insertions, 4 deletions
diff --git a/site/docs/4.3/components/card.md b/site/docs/4.3/components/card.md index 3e2e12db5..59e962e49 100644 --- a/site/docs/4.3/components/card.md +++ b/site/docs/4.3/components/card.md @@ -623,10 +623,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]({{ site.baseurl }}/docs/{{ site.docs_version }}/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]({{ site.baseurl }}/docs/{{ site.docs_version }}/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. {% capture 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"> {% include icons/placeholder.svg width="100%" height="140" class="card-img-top" text="Image cap" %} @@ -670,7 +670,7 @@ Use the Bootstrap grid system and its [`.row-cols` classes]({{ site.baseurl }}/d Change it to `.row-cols-3` and you'll see the fourth card wrap. {% capture 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"> {% include icons/placeholder.svg width="100%" height="140" class="card-img-top" text="Image cap" %} @@ -714,7 +714,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. {% capture 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"> {% include icons/placeholder.svg width="100%" height="140" class="card-img-top" text="Image cap" %} |