rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-01-30 22:52:24 +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 cdfba0be4a
commit b5ba078b12
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/docs/4.3/components/card.md
View File

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