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.

View Output

Header & Footer

You can add a header and/or footer by adding a <div> with .card-header or .card-footer.

View Output

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).

View Output

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.

View Output

Nav Pill

Add the .card-header-pills class to the <ul> element.

View Output

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.

View Output

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.

View Output

List Groups

You can add list groups to cards. Use the .list-group-flush class to place it flush against the card's border.

View Output

Links

Add the .card-link class to the <a> element to display links inside cards.

View Output

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).

View Output

Contextual Color

You can use Bootstrap's text and background utilities to change the color of the card.

View Output

Border Color

You can also use Bootstrap's border utilities.

View Output

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.

View Output

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.

View Output

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.

View Output