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.
To create a basic card, apply the
.card-body classes to an element to create the outer card container.
.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
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.
You can also apply the
.card-header class to any HTML header element (i.e.
You can also add a Bootstrap nav pill or nav tab to a card.
.card-header-tabs class to the
.card-header-pills class to the
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
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-bottom class to the
You can add list groups to cards. Use the
.list-group-flush class to place it flush against the card's border.
.card-link class to the
<a> element to display links inside cards.
You can use any of Bootstrap's text alignment classes to align text within the card.
.text-nowrap, as well as the various
.text-*-* classes (for example,
You can use Bootstrap's text and background utilities to change the color of the card.
You can also use Bootstrap's border utilities.
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.
Cards will fill the horizontal space by default. You can change the width via a number of methods.
You can specify the width explicitly using CSS. For example, you can use properties such as
max-width. Some of the above examples use CSS to constrain the width of the cards.
As with any other content, you can place your cards inside a Bootstrap grid.
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
If the example doesn't appear correctly, it is probably due to the small viewport size. Try this preview instead for a wider viewport.