Nearby lessons
18 of 39🃏 BS5 Cards
📌 What Are Bootstrap 5 Cards?
Cards are flexible content containers. Use .card as the wrapper, .card-body for the main content. Optionally add .card-header, .card-footer, and .card-img-top or .card-img-bottom for images.
🃏 Basic Card (.card, .card-body)
.card – outer container with border and rounded corners. .card-body – padding and content area. Use .card-title and .card-text for heading and paragraph inside the body.
📌 Card Header and Footer (.card-header, .card-footer)
.card-header – bar at the top (e.g. title or tabs). .card-footer – bar at the bottom (e.g. “Last updated”). Place them as direct children of .card, before or after .card-body.
🖼️ Card with Image (.card-img-top, .card-img-bottom)
.card-img-top – image at the top of the card (full width, rounded top). .card-img-bottom – image at the bottom. Put the image before or after .card-body; no wrapper needed.
🎨 Card with Colored Header/Footer
Add background utilities to .card-header or .card-footer: .bg-primary, .bg-success, etc. Use .text-white for light text on dark backgrounds.
📐 Card Layout (grid)
Use the grid: put each .card in a column (e.g. .col-md-4) so multiple cards sit in a row and stack on small screens.
✅ Card Best Practices
- .card-title and .card-text for consistent typography inside the body.
- Use .card-img-top for a clear visual hierarchy.
- Use the grid (.row, .col-*) to lay out multiple cards.