rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-01-18 10:52:19 +01:00
Code Issues Actions Packages Releases Activity

Grid card example tweaks (#29409)

Browse Source 
Stack in cards in one column when < md
This commit is contained in:
Shohei Yoshida 2019-09-24 19:48:45 +09:00 committed by XhmikosR
parent 04796b8f3a
commit d2a24e09ec
1 changed files with 4 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
site/content/docs/4.3/components/card.md
View File

@ -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" >}}