BS5 Cards
Bootstrap 5 Cards
In Bootstrap 5, a card is a box with a border and padding around the contents. It has settings for content, colors, headers, footers, and other things.
Basic Card
The .card class is used to generate a basic card, while the .card-body class is used for content inside the card:
Example
<div class="card">
<div class="card-body">Basic card</div>
</div>
Bootstrap 3 users may recognize that cards take the place of previous panels, wells, and thumbnails.
Header and Footer
The card’s header and footer are added using the .card-header and .card-footer classes, respectively:
Example
<div class="card">
<div class="card-header">Header</div>
<div class="card-body">Content</div>
<div class="card-footer">Footer</div>
</div>
Contextual Cards
Use contextual classes (.bg-primary, .bg-success,.bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark, and.bg-light) to add a background color to the card.
Example
Â
Â
Â
Â
Â
Â
Â
Â
Titles, text, and links
To add card titles to any heading element, use the .card-title suffix. If a <p> element is the only or last child inside .card-body, its bottom margins are removed using the .card-text class. Any link can have a hover effect and a blue color added by using the .card-link class.
Example
<div class="card">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text">Some example text. Some example text.</p>
<a href="#" class="card-link">Card link</a>
<a href="#" class="card-link">Another link</a>
</div>
</div>
Card Images
To position an image at the top or bottom inside the card, add .card-img-top or .card-img-bottom to a <img>. Observe that in order to fill the complete width, we have added the image outside of the .card-body:
Example
<div class="card" style="width:400px">
<img decoding="async" class="card-img-top" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt="Card image" title="BS5 Cards 4" data-lazy-src="img_avatar1.png"><noscript><img decoding="async" class="card-img-top" src="img_avatar1.png" alt="Card image" title="BS5 Cards 4"></noscript>
<div class="card-body">
<h4 class="card-title">John Doe</h4>
<p class="card-text">Some example text.</p>
<a href="#" class="btn btn-primary">See Profile</a>
</div>
</div>
Card Image Overlays
To add text on top of an image that has been turned into a card background, use the .card-img-overlay function:
Example
<div class="card" style="width:500px">
<img decoding="async" class="card-img-top" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt="Card image" title="BS5 Cards 4" data-lazy-src="img_avatar1.png"><noscript><img decoding="async" class="card-img-top" src="img_avatar1.png" alt="Card image" title="BS5 Cards 4"></noscript>
<div class="card-img-overlay">
<h4 class="card-title">John Doe</h4>
<p class="card-text">Some example text.</p>
<a href="#" class="btn btn-primary">See Profile</a>
</div>
</div>
