Below is an example of a basic card with mixed content and a fixed width.
This is a longer 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
<div class="card" style="max-width: 18rem;">
<img class="card-img-top" src="../../assets/img/login-banner-03.jpg" alt="Card image cap">
<div class="card-body">
<h3 class="card-title">Card title</h3>
<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 5 mins ago</small>
</p>
</div>
</div>
Card titles are used by adding .card-title to a <h*> tag. In the same way, links are added and placed next to each other by adding .card-link to an tag.
Subtitles are used by adding a .card-subtitle to a <h*> tag.
Some quick example text to build on the card title and make up the bulk of the card's content.
Card link Another link
<div class="card" style="width: 18rem;">
<div class="card-body">
<h6 class="card-subtitle mb-1 text-muted mt-0">Card subtitle</h6>
<h5 class="card-title">Card 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>
<a href="#" class="card-link">Card link</a>
<a href="#" class="card-link">Another link</a>
</div>
</div>
Add an optional header within a card. By default .card-header is set to display: flex; and justify-content: space-between; and align-items: center;.
With supporting text below as a natural lead-in to additional content.
Go somewhere
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>
With supporting text below as a natural lead-in to additional content.
<div class="card">
<div class="card-header bg-white">
<div class="row">
<div class="col">
<h3 class="card-header-title mb-0">Featured</h3>
</div>
<div class="col-auto">
<small class="text-muted">2 days ago</small>
</div>
</div>
</div>
<div class="card-body">
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
</div>
</div>
The building block of a card is the .card-body. Use it whenever you need a padded section within a card.
<div class="card">
<div class="card-body">
This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
</div>
</div>
Add an optional footer within a card.
With supporting text below as a natural lead-in to additional content.
Go somewhere
<div class="card">
<div class="card-body">
<h3 class="card-title">Special title treatment</h3>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
<div class="card-footer bg-white">
2 days ago
</div>
</div>
Cards include a few options for working with images. Choose from appending "image caps" at either end of a card, overlaying images with card content, or simply embedding the image in a card.
Similar to headers and footers, cards can include top and bottom “image caps”—images at the top or bottom of a card.
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
<div class="card">
<img class="card-img-top" src="../../assets/img/login-banner-03.jpg" alt="Card image cap">
<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>
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
<div class="card">
<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>
<img class="card-img-bottom" src="../../assets/img/login-banner-03.jpg" alt="Card image cap">
</div>
Turn an image into a card background and overlay your card’s text. Depending on the image, you may or may not need additional styles or utilities.
<div class="card text-white">
<img class="card-img card-img-top" src="../../assets/img/login-banner-03.jpg" alt="Card image cap">
<div class="card-img-overlay">
<h5 class="card-title text-white">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>
<small class="card-text">Last updated 3 mins ago</small>
</div>
</div>
Heads up! Note that content should not be larger than the height of the image. If content is larger than the image the content will be displayed outside the image.
Using a combination of grid and utility classes, cards can be made horizontal in a mobile-friendly and responsive way. In the example below, we remove the grid gutters with .no-gutters and use .col-md-* classes to make the card horizontal at the md breakpoint. Further adjustments may be needed depending on your card content.
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
<div class="card mb-3" style="max-width: 750px;">
<div class="row g-0">
<div class="col-md-4">
<img class="img-fluid" src="../../assets/img/login-banner-05.jpg" alt="Card image">
</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>
In addition to styling the content within cards, Bootstrap includes a few options for laying out series of cards. For the time being, these layout options are not yet responsive.
Use card groups to render cards as a single, attached element with equal width and height columns. Card groups start off stacked and use display: flex; to become attached with uniform dimensions starting at the sm breakpoint.
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
This card has supporting text below as a natural lead-in to additional content.
Last updated 3 mins ago
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.
Last updated 3 mins ago
<div class="card-group">
<div class="card">
<img class="card-img-top" src="../../assets/img/login-banner-03.jpg" alt="Image Description">
<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 class="card">
<img class="card-img-top" src="../../assets/img/login-banner-05.jpg" alt="Image Description">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<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>
<div class="card">
<img class="card-img-top" src="../../assets/img/login-banner-03.jpg" alt="Image Description">
<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 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>
</div>
</div>
When using card groups with footers, their content will automatically line up.
This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
This card has supporting text below as a natural lead-in to additional content.
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.
<div class="card-group">
<div class="card">
<img class="card-img-top" src="../../assets/img/login-banner-03.jpg" alt="Image Description">
<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>
</div>
<div class="card-footer bg-white">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
<div class="card">
<img class="card-img-top" src="../../assets/img/login-banner-05.jpg" alt="Image Description">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
</div>
<div class="card-footer bg-white">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
<div class="card">
<img class="card-img-top" src="../../assets/img/login-banner-03.jpg" alt="Image Description">
<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 card has even longer content than the first to show that equal height action.</p>
</div>
<div class="card-footer bg-white">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
</div>