Bootstrap 5 Cards
Cards add a flexible and extensible container for displaying content in a variety of ways.
A card is a container with light styling that you can place virtually any content into. Plenty of styling options are available such as alignment, padding, colors, headings, and more.
Basic Card
To create a basic card, apply the .card
and .card-body
classes to an element to create the outer card container.
Add .card-title
to any heading elements and .card-text
to text elements.
Header & Footer
You can add a header and/or footer by adding a <div>
with .card-header
or .card-footer
.
Here I've also moved the .card-body
to a new <div>
inside the card. I did this to allow the card header to line up flush against the card border (the .card-body
has padding which I don't want). More on flush content below.
HTML Headers
You can also apply the .card-header
class to any HTML header element (i.e. <h1>
- <h6>
tags).
Header Navigation
You can also add a Bootstrap nav pill or nav tab to a card.
Nav Tab
Add the .card-header-tabs
class to the <ul>
element.
Nav Pill
Add the .card-header-pills
class to the <ul>
element.
Flush Content (Remove Padding)
By default, the .card-body
class has padding. This provides a nice aesthetically pleasing space between the content and the card border.
Sometimes you might want to remove the padding and have content line up flush against the sides of the card.
To create flush content, don't put that content inside a .card-body
(because it has padding).
Instead, remove the .card-body
from the outer <div>
and nest it inside (in its own <div>
).
Now you can place the (flush) content outside the .card-body
(but still inside the .card
). This effectively removes the padding — allowing the content to line up flush against the sides of the card. You can have multiple .card-body
elements if required.
Note that when using content with a fixed width (such as images), you may need to specify the width
of the card to match that of the content.
Top & Bottom
You can have content such as images line up flush with the top of the card (so that the top corners of the image fit flush with the rounded corners of the card).
To do this, apply either the .card-img-top
or .card-img-bottom
class to the <img>
tag.
List Groups
You can add list groups to cards. Use the .list-group-flush
class to place it flush against the card's border.
Links
Add the .card-link
class to the <a>
element to display links inside cards.
Text Alignment
You can use any of Bootstrap's text alignment classes to align text within the card.
These include .text-start
, .text-end
, .text-center
, .text-nowrap
, as well as the various .text-*-*
classes (for example, .text-sm-start
, .text-md-start
, .text-lg-start
, .text-xl-start
, etc).
Contextual Color
You can use Bootstrap's text and background utilities to change the color of the card.
Border Color
You can also use Bootstrap's border utilities.
Image Overlay
You can apply a background image to a card, then have text appear over the top.
To do this, apply the .card-img-overlay
class to the text content.
Card Width
Cards will fill the horizontal space by default. You can change the width via a number of methods.
CSS
You can specify the width explicitly using CSS. For example, you can use properties such as width
or max-width
. Some of the above examples use CSS to constrain the width of the cards.
Grid
As with any other content, you can place your cards inside a Bootstrap grid.
Card Groups
Card groups allow you to present multiple cards as a single attached element, with equal widths and heights.
To do this, nest all cards within a .card-group
element.
If the example doesn't appear correctly, it is probably due to the small viewport size. Try this preview instead for a wider viewport.