diff options
author | Mark Otto <markdotto@gmail.com> | 2019-07-18 02:48:43 +0300 |
---|---|---|
committer | XhmikosR <xhmikosr@gmail.com> | 2019-09-26 18:37:07 +0300 |
commit | acb2b7061c56f9c6e05aff17750a03334f6d70e8 (patch) | |
tree | 4ffc0251355d8b2d5fa6ab90b7b9a725e1cca561 /site | |
parent | 9ed860ef24a4a4103a779661364a28b5562eb2a7 (diff) |
Move margins, and equal height via utility example
Diffstat (limited to 'site')
-rw-r--r-- | site/docs/4.3/components/card.md | 84 |
1 files changed, 65 insertions, 19 deletions
diff --git a/site/docs/4.3/components/card.md b/site/docs/4.3/components/card.md index 7d04f45161..3e2e12db5f 100644 --- a/site/docs/4.3/components/card.md +++ b/site/docs/4.3/components/card.md @@ -623,12 +623,12 @@ Just like with card groups, card footers in decks will automatically line up. ### Grid cards -Use the Bootstrap grid system and its [`.rol-cols` classes]() to control how many grid columns (wrapped around your cards) you show per row. +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. {% capture example %} -<div class="row row-cols-2"> - <div class="col"> - <div class="card mb-4"> +<div class="row 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" %} <div class="card-body"> <h5 class="card-title">Card title</h5> @@ -636,8 +636,8 @@ Use the Bootstrap grid system and its [`.rol-cols` classes]() to control how man </div> </div> </div> - <div class="col"> - <div class="card mb-4"> + <div class="col mb-4"> + <div class="card"> {% include icons/placeholder.svg width="100%" height="140" class="card-img-top" text="Image cap" %} <div class="card-body"> <h5 class="card-title">Card title</h5> @@ -645,8 +645,8 @@ Use the Bootstrap grid system and its [`.rol-cols` classes]() to control how man </div> </div> </div> - <div class="col"> - <div class="card mb-4"> + <div class="col mb-4"> + <div class="card"> {% include icons/placeholder.svg width="100%" height="140" class="card-img-top" text="Image cap" %} <div class="card-body"> <h5 class="card-title">Card title</h5> @@ -654,8 +654,8 @@ Use the Bootstrap grid system and its [`.rol-cols` classes]() to control how man </div> </div> </div> - <div class="col"> - <div class="card mb-4"> + <div class="col mb-4"> + <div class="card"> {% include icons/placeholder.svg width="100%" height="140" class="card-img-top" text="Image cap" %} <div class="card-body"> <h5 class="card-title">Card title</h5> @@ -667,10 +667,39 @@ Use the Bootstrap grid system and its [`.rol-cols` classes]() to control how man {% endcapture %} {% include example.html content=example %} +Change it to `.row-cols-3` and you'll see the fourth card wrap. + {% capture example %} -<div class="row row-cols-3"> - <div class="col"> - <div class="card mb-4"> +<div class="row 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" %} + <div class="card-body"> + <h5 class="card-title">Card title</h5> + <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> + </div> + </div> + </div> + <div class="col mb-4"> + <div class="card"> + {% include icons/placeholder.svg width="100%" height="140" class="card-img-top" text="Image cap" %} + <div class="card-body"> + <h5 class="card-title">Card title</h5> + <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> + </div> + </div> + </div> + <div class="col mb-4"> + <div class="card"> + {% include icons/placeholder.svg width="100%" height="140" class="card-img-top" text="Image cap" %} + <div class="card-body"> + <h5 class="card-title">Card title</h5> + <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p> + </div> + </div> + </div> + <div class="col mb-4"> + <div class="card"> {% include icons/placeholder.svg width="100%" height="140" class="card-img-top" text="Image cap" %} <div class="card-body"> <h5 class="card-title">Card title</h5> @@ -678,8 +707,16 @@ Use the Bootstrap grid system and its [`.rol-cols` classes]() to control how man </div> </div> </div> - <div class="col"> - <div class="card mb-4"> +</div> +{% endcapture %} +{% include example.html content=example %} + +When you need equal height, add `.h-100` to the cards. + +{% capture example %} +<div class="row 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" %} <div class="card-body"> <h5 class="card-title">Card title</h5> @@ -687,8 +724,17 @@ Use the Bootstrap grid system and its [`.rol-cols` classes]() to control how man </div> </div> </div> - <div class="col"> - <div class="card mb-4"> + <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" %} + <div class="card-body"> + <h5 class="card-title">Card title</h5> + <p class="card-text">This is a short card.</p> + </div> + </div> + </div> + <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" %} <div class="card-body"> <h5 class="card-title">Card title</h5> @@ -696,8 +742,8 @@ Use the Bootstrap grid system and its [`.rol-cols` classes]() to control how man </div> </div> </div> - <div class="col"> - <div class="card mb-4"> + <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" %} <div class="card-body"> <h5 class="card-title">Card title</h5> |