mirror of
https://github.com/twbs/bootstrap.git
synced 2025-03-13 13:29:25 +01:00
Move margins, and equal height via utility example
This commit is contained in:
parent
e2252e0230
commit
db692d02d5
@ -603,12 +603,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]({{< 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.
|
||||
|
||||
{{< 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">
|
||||
{{< placeholder width="100%" height="140" class="card-img-top" text="Image cap" >}}
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Card title</h5>
|
||||
@ -616,8 +616,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">
|
||||
{{< placeholder width="100%" height="140" class="card-img-top" text="Image cap" >}}
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Card title</h5>
|
||||
@ -625,8 +625,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">
|
||||
{{< placeholder width="100%" height="140" class="card-img-top" text="Image cap" >}}
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Card title</h5>
|
||||
@ -634,8 +634,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">
|
||||
{{< placeholder width="100%" height="140" class="card-img-top" text="Image cap" >}}
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Card title</h5>
|
||||
@ -646,10 +646,12 @@ Use the Bootstrap grid system and its [`.rol-cols` classes]() to control how man
|
||||
</div>
|
||||
{{< /example >}}
|
||||
|
||||
Change it to `.row-cols-3` and you'll see the fourth card wrap.
|
||||
|
||||
{{< 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">
|
||||
{{< placeholder width="100%" height="140" class="card-img-top" text="Image cap" >}}
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Card title</h5>
|
||||
@ -657,8 +659,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">
|
||||
{{< placeholder width="100%" height="140" class="card-img-top" text="Image cap" >}}
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Card title</h5>
|
||||
@ -666,8 +668,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">
|
||||
{{< placeholder width="100%" height="140" class="card-img-top" text="Image cap" >}}
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Card title</h5>
|
||||
@ -675,8 +677,51 @@ 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">
|
||||
{{< placeholder 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>
|
||||
{{< /example >}}
|
||||
|
||||
When you need equal height, add `.h-100` to the cards.
|
||||
|
||||
{{< example >}}
|
||||
<div class="row 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" >}}
|
||||
<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">
|
||||
{{< placeholder 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">
|
||||
{{< placeholder 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">
|
||||
{{< placeholder width="100%" height="140" class="card-img-top" text="Image cap" >}}
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Card title</h5>
|
||||
|
Loading…
x
Reference in New Issue
Block a user