Card Group
Example 1
Source Code
<div class="card-group mb-8">
<!-- Card -->
<div class="card">
<!-- Card Image -->
<img class="card-img-top" src="assets/images/card/vegetable.jpeg" alt="Vegetable">
<!-- /card image -->
<!-- Card Body -->
<div class="card-body">
<!-- Card Title-->
<h2 class="card-title">Card title</h2>
<!-- Card Title-->
<!-- Card Text-->
<p class="card-text">
This is a wider card with supporting text below as a natural lead-in to
additional content. This
content
is a little bit longer.
</p>
<!-- /card text-->
<!-- Card Text-->
<p class="card-text">
<small class="text-muted">Last updated 3 mins ago</small>
</p>
<!-- /card text-->
</div>
<!-- /card body -->
</div>
<!-- /card -->
<!-- Card -->
<div class="card">
<!-- Card Image -->
<img class="card-img-top" src="assets/images/card/plant.jpeg" alt="plant">
<!-- /card image -->
<!-- Card Body -->
<div class="card-body">
<!-- Card Title-->
<h2 class="card-title">Card title</h2>
<!-- Card Title-->
<!-- Card Text-->
<p class="card-text">
Some quick example text to build on the
card title and make up the bulk of the
card's content.
</p>
<!-- /card text-->
<!-- Card Text-->
<p class="card-text">
<small class="text-muted">Last updated 3 mins ago</small>
</p>
<!-- /card text-->
</div>
<!-- /card body -->
</div>
<!-- /card -->
<!-- Card -->
<div class="card">
<!-- Card Image -->
<img class="card-img-top" src="assets/images/card/coffee-cookies.jpeg" alt="Coffee">
<!-- /card image -->
<!-- Card Body -->
<div class="card-body">
<!-- Card Title-->
<h2 class="card-title">Card title</h2>
<!-- Card Title-->
<!-- Card Text-->
<p class="card-text">
This is a wider card with supporting text below as a natural lead-in to
additional content. This
card
has even longer content than the first to show that equal height action.
</p>
<!-- /card text-->
<!-- Card Text-->
<p class="card-text">
<small class="text-muted">Last updated 3 mins ago</small>
</p>
<!-- /card text-->
</div>
<!-- /card body -->
</div>
<!-- /card -->
</div>
Example 2
Source Code
<div class="card-deck mb-8">
<!-- Card -->
<div class="card">
<!-- Card Image -->
<img class="card-img-top" src="assets/images/card/asphalt-balancing.jpeg" alt="Balancing">
<!-- /card image -->
<!-- Card Body -->
<div class="card-body">
<!-- Card Title-->
<h2 class="card-title">Card title</h2>
<!-- Card Title-->
<!-- Card Text-->
<p class="card-text">
This is a wider card with supporting text below as a natural lead-in to
additional content. This
content
is a little bit longer.
</p>
<!-- /card text-->
<!-- Card Text-->
<p class="card-text">
<small class="text-muted">Last updated 3 mins ago</small>
</p>
<!-- /card text-->
</div>
<!-- /card body -->
</div>
<!-- /card -->
<!-- Card -->
<div class="card">
<!-- Card Image -->
<img class="card-img-top" src="assets/images/card/sunset.jpeg" alt="sunset">
<!-- /card image -->
<!-- Card Body -->
<div class="card-body">
<!-- Card Title-->
<h2 class="card-title">Card title</h2>
<!-- Card Title-->
<!-- Card Text-->
<p class="card-text">
Some quick example text to build on the
card title and make up the bulk of the
card's content.
</p>
<!-- /card text-->
<!-- Card Text-->
<p class="card-text">
<small class="text-muted">Last updated 3 mins ago</small>
</p>
<!-- /card text-->
</div>
<!-- /card body -->
</div>
<!-- /card -->
<!-- Card -->
<div class="card">
<!-- Card Image -->
<img class="card-img-top" src="assets/images/card/person-walking.jpeg" alt="Person">
<!-- /card image -->
<!-- Card Body -->
<div class="card-body">
<!-- Card Title-->
<h2 class="card-title">Card title</h2>
<!-- Card Title-->
<!-- Card Text-->
<p class="card-text">
This is a wider card with supporting text below as a natural lead-in to
additional content. This
card
has even longer content than the first to show that equal height action.
</p>
<!-- /card text-->
<!-- Card Text-->
<p class="card-text">
<small class="text-muted">Last updated 3 mins ago</small>
</p>
<!-- /card text-->
</div>
<!-- /card body -->
</div>
<!-- /card -->
</div>
Example 3
Source Code
<div class="card-columns">
<!-- Card -->
<div class="card">
<!-- Card Image -->
<img class="card-img-top" src="assets/images/card/painted-hand.jpeg" alt="Hand">
<!-- /card image -->
<!-- Card Body -->
<div class="card-body">
<h2 class="card-title">Card title that wraps to a new line</h2>
<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>
<!-- /card body -->
</div>
<!-- /card -->
<!-- Card -->
<div class="card">
<!-- Blockquote -->
<blockquote class="blockquote mb-0 card-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat
a ante.</p>
<footer class="blockquote-footer">
<small class="text-muted">
Someone famous in <cite title="Source Title">Source Title</cite>
</small>
</footer>
</blockquote>
<!-- /blockquote -->
</div>
<!-- /card -->
<!-- Card -->
<div class="card">
<!-- Card Image -->
<img class="card-img-top" src="assets/images/card/bottle.jpeg" alt="Bottle">
<!-- /card image -->
<div class="card-body">
<h2 class="card-title">Card title</h2>
<p class="card-text">This card has supporting text below as a natural lead-in to
additional
content.</p>
<p class="card-text">
<small class="text-muted">Last updated 3 mins ago</small>
</p>
</div>
</div>
<!-- /card -->
<!-- Card -->
<div class="card bg-primary text-center">
<!-- Card Body -->
<blockquote class="blockquote mb-0 text-white card-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere
erat.</p>
<footer class="blockquote-footer text-white">
<small>
Someone famous in <cite title="Source Title">Source Title</cite>
</small>
</footer>
</blockquote>
<!-- /card body -->
</div>
<!-- /card -->
<!-- Card -->
<div class="card text-center">
<!-- Card Body -->
<div class="card-body">
<h2 class="card-title">Card title</h2>
<p class="card-text">This card has supporting text below as a natural lead-in to
additional
content.</p>
<p class="card-text">
<small class="text-muted">Last updated 3 mins ago</small>
</p>
</div>
<!-- /card body -->
</div>
<!-- /card -->
<!-- Card -->
<div class="card">
<!-- Card Image -->
<img class="card-img" src="assets/images/card/doughnut.jpeg" alt="Doughnut">
<!-- /card image -->
</div>
<!-- /card -->
<!-- Card -->
<div class="card text-right">
<!-- Card Body -->
<blockquote class="blockquote mb-0 card-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat
a ante.</p>
<footer class="blockquote-footer">
<small class="text-muted">
Someone famous in <cite title="Source Title">Source Title</cite>
</small>
</footer>
</blockquote>
<!-- /card body -->
</div>
<!-- /card -->
<!-- Card -->
<div class="card">
<!-- Card Body -->
<div class="card-body">
<h2 class="card-title">Card title</h2>
<p class="card-text">This is a wider card with supporting text below as a
natural lead-in to
additional
content. This card has even longer content than the first to show that equal
height action.</p>
<p class="card-text">
<small class="text-muted">Last updated 3 mins ago</small>
</p>
</div>
<!-- /card body -->
</div>
<!-- /card -->
</div>
Last modified 3yr ago