mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-23 13:43:11 +02:00
Code Issues Releases Wiki Activity

Move margins, and equal height via utility example

Browse Source
This commit is contained in:
Mark Otto
2019-07-18 02:48:43 +03:00
committed by XhmikosR
parent 9ed860ef24
commit acb2b7061c
1 changed files with 65 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

84
site/docs/4.3/components/card.md
View File

@@ -623,12 +623,12 @@ Just like with card groups, card footers in decks will automatically line up.
### Grid cards ### 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 %} {% capture example %}
<div class="row row-cols-2"> <div class="row row-cols-md-2">
<div class="col"> <div class="col mb-4">
<div class="card mb-4"> <div class="card">
{% include icons/placeholder.svg width="100%" height="140" class="card-img-top" text="Image cap" %} {% include icons/placeholder.svg width="100%" height="140" class="card-img-top" text="Image cap" %}
<div class="card-body"> <div class="card-body">
<h5 class="card-title">Card title</h5> <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>
</div> </div>
<div class="col"> <div class="col mb-4">
<div class="card mb-4"> <div class="card">
{% include icons/placeholder.svg width="100%" height="140" class="card-img-top" text="Image cap" %} {% include icons/placeholder.svg width="100%" height="140" class="card-img-top" text="Image cap" %}
<div class="card-body"> <div class="card-body">
<h5 class="card-title">Card title</h5> <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>
</div> </div>
<div class="col"> <div class="col mb-4">
<div class="card mb-4"> <div class="card">
{% include icons/placeholder.svg width="100%" height="140" class="card-img-top" text="Image cap" %} {% include icons/placeholder.svg width="100%" height="140" class="card-img-top" text="Image cap" %}
<div class="card-body"> <div class="card-body">
<h5 class="card-title">Card title</h5> <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>
</div> </div>
<div class="col"> <div class="col mb-4">
<div class="card mb-4"> <div class="card">
{% include icons/placeholder.svg width="100%" height="140" class="card-img-top" text="Image cap" %} {% include icons/placeholder.svg width="100%" height="140" class="card-img-top" text="Image cap" %}
<div class="card-body"> <div class="card-body">
<h5 class="card-title">Card title</h5> <h5 class="card-title">Card title</h5>
@@ -667,10 +667,12 @@ Use the Bootstrap grid system and its [`.rol-cols` classes]() to control how man
{% endcapture %} {% endcapture %}
{% include example.html content=example %} {% include example.html content=example %}
Change it to `.row-cols-3` and you'll see the fourth card wrap.
{% capture example %} {% capture example %}
<div class="row row-cols-3"> <div class="row row-cols-md-3">
<div class="col"> <div class="col mb-4">
<div class="card mb-4"> <div class="card">
{% include icons/placeholder.svg width="100%" height="140" class="card-img-top" text="Image cap" %} {% include icons/placeholder.svg width="100%" height="140" class="card-img-top" text="Image cap" %}
<div class="card-body"> <div class="card-body">
<h5 class="card-title">Card title</h5> <h5 class="card-title">Card title</h5>
@@ -678,8 +680,8 @@ Use the Bootstrap grid system and its [`.rol-cols` classes]() to control how man
</div> </div>
</div> </div>
</div> </div>
<div class="col"> <div class="col mb-4">
<div class="card mb-4"> <div class="card">
{% include icons/placeholder.svg width="100%" height="140" class="card-img-top" text="Image cap" %} {% include icons/placeholder.svg width="100%" height="140" class="card-img-top" text="Image cap" %}
<div class="card-body"> <div class="card-body">
<h5 class="card-title">Card title</h5> <h5 class="card-title">Card title</h5>
@@ -687,8 +689,8 @@ Use the Bootstrap grid system and its [`.rol-cols` classes]() to control how man
</div> </div>
</div> </div>
</div> </div>
<div class="col"> <div class="col mb-4">
<div class="card mb-4"> <div class="card">
{% include icons/placeholder.svg width="100%" height="140" class="card-img-top" text="Image cap" %} {% include icons/placeholder.svg width="100%" height="140" class="card-img-top" text="Image cap" %}
<div class="card-body"> <div class="card-body">
<h5 class="card-title">Card title</h5> <h5 class="card-title">Card title</h5>
@@ -696,8 +698,52 @@ Use the Bootstrap grid system and its [`.rol-cols` classes]() to control how man
</div> </div>
</div> </div>
</div> </div>
<div class="col"> <div class="col mb-4">
<div class="card 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>
{% 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>
<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 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>
<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 h-100">
{% include icons/placeholder.svg width="100%" height="140" class="card-img-top" text="Image cap" %} {% include icons/placeholder.svg width="100%" height="140" class="card-img-top" text="Image cap" %}
<div class="card-body"> <div class="card-body">
<h5 class="card-title">Card title</h5> <h5 class="card-title">Card title</h5>