Bootstrap 5 Cards
A card in Bootstrap 5 is a bordered box with some padding around its content. It includes options for headers, footers, content, colors, etc.
Basic Card
A basic card is created with the .card class
, and content inside the card has a .card-body class:
Basic card
Example
<div class="card"> <div class="card-body">Basic card</div> </div>
Header and Footer
Header
Content
The .card-header
class adds a heading to the card and the .card-footer class adds a footer to the card:
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
To add a background color the card, use contextual classes (.bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark and .bg-light.
Basic card
Example
Basic cardPrimary cardSuccess cardInfo cardWarning cardDanger cardSecondary card
Dark cardLight card
Titles, text, and links
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>You can click on above box to edit the code and run again.