Card
css class | description |
---|---|
card | Defines a card. |
card-header | Specifies a header section of card. It can be <div> with content or single element such <h5>. |
card-body | Specifies a body section of card. |
card-title | Specifies a title of card inside the body section. |
card-text | Specifies the text for the card. Usually applied to the <p> element. |
card-img-top | Specifies an image cap, that can be placed on the top or bottom of card. |
card-img | Turns an image into a card background. Used in conjuction with the card-img-overlay class. |
card-img-overlay | Allows to overlay content on image (example). |
card-link | Specifies link inside card. |
card-footer | Specifies a footer section of card. |
<div class="card border-secondary mb-3 mt-4"
style="max-width: 18rem;">
<div class="card-header">Header</div>
<img src="/images/flower_n_1.jpeg"
class="card-img-top" alt="rose">
<div class="card-body">
<h5 class="card-title">My title</h5>
<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>
<p class="card-text">
<small class="text-muted">Last
updated 3 mins ago</small></p>
</div>
<div class="card-footer">
some footer text
</div>
</div>
Header

My title
Some quick example text to build on the card title and make up the bulk of the card's content.
Last updated 3 mins ago
card with image overlays
<div
class="card border-secondary mb-3 mt-4 text-white"
style="max-width: 18rem;">
<img src="/images/flower_n_1.jpeg"
class="card-img" alt="rose">
<div class="card-img-overlay">
<h5 class="card-title">My title</h5>
<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>
</div>
<div class="card-footer text-muted">
<small>Last updated 3 mins ago</small>
</div>
</div>

horizontal card with
In following example card has horizontal orientation on medium screens and higher. On small screen card has vertical orientation.
<div class="card mb-3"
style="max-width: 384px;">
<div class="row no-gutters align-items-center">
<div class="col-md-4">
<img src="/images/flower_n_1.jpeg"
class="card-img"
alt="rose">
</div>
<div class="col-md-8">
<div class="card-body">
<h5 class="card-title">
Card title</h5>
<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>
<p class="card-text">
<small class="text-muted">Last
updated 3 mins ago</small>
</p>
</div>
</div>
</div>
</div>

Card title
This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
Last updated 3 mins ago