Bootstrap 5 TutorialLesson 19Free preview
BS5 Cards
This lesson is part of Bootstrap · All levels
Summary
A card is a versatile content box to display images, titles, text, and links in a consistent style packaging. Its structure starts with .card, then .card-body for content, and supporting components such as .card-title and .card-img-top. The cards can be sorted into a grid to look like a catalog.
Key points
- .card is the main container and .card-body provides content padding.
- .card-img-top and .card-img-bottom place the image above or below.
- .card-title, .card-subtitle, .card-text format the text content.
- .card-header and .card-footer add special upper and lower sections.
- Some cards are arranged in columns .row to be parallel and equal in height.
Full lesson
Code examples and quizzes
Full lessons, code examples, and quizzes are available to subscribers. 5 questions.