Cards
In Bootstrap 5, a card is a bordered container with padding that can include headers, footers, content, background colors, and more.
Basic Card
To create a basic card, use the .card class, and wrap the content inside a .card-body element
Output:
Header and Footer
Use the .card-header class to add a heading and the .card-footer class to add a footer to the card.
Output:
Contextual Cards
Apply contextual classes like .bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark, or .bg-light to give the card a background color.
Output 3:
Titles, text, and links
Use the .card-title class to style headings as card titles. The .card-text class removes bottom margin from a <p> if it’s the last (or only) child in .card-body The .card-link class gives links a blue color and a hover effect.
Output:
Card Images
Use .card-img-top or .card-img-bottom on an <img> element to position the image at the top or bottom of the card. Note that placing the image outside .card-body llows it to stretch across the full width of the card
Output:
Card Image Overlays
Make an image the background of a card by using .card-img and apply .card-img-overlay to place text over the image.