Bootstrap 5 header small text goes here...

A card is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options. If you’re familiar with Bootstrap 3, cards replace our old panels, wells, and thumbnails. Similar functionality to those components is available as modifier classes for cards.

EXAMPLE

Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere
IMAGE OVERLAYS

Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 3 mins ago

INVERTED TEXT

Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere
BLOCKS
This is some text within a card block.
TITLE, TEXT & LINKS

Card title

Card subtitle

Some quick example text to build on the card title and make up the bulk of the card's content.

Card link Another link
WITH IMAGES

Some quick example text to build on the card title and make up the bulk of the card's content.

LIST GROUPS
  • Cras justo odio
  • Dapibus ac facilisis in
  • Vestibulum at eros
HEADER & FOOTER
Featured

Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere
NAVIGATION

Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere

Special title treatment 2

With supporting text below as a natural lead-in to additional content.

Go somewhere
NAVIGATION PILLS

Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere

Special title treatment 2

With supporting text below as a natural lead-in to additional content.

Go somewhere
BACKGROUND VARIANTS

Make it so that
everything becomes your
spiritual advisor

You don't have
to invade a country in order
to be happy

Imagination is to
never pretend to be
handicapped

BORDER CARDS

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

CARD GROUPS
Card image cap

Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 3 mins ago

Card image cap

Card title

This card has supporting text below as a natural lead-in to additional content.

Last updated 3 mins ago

Card image cap

Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 3 mins ago

Card image cap

Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.

Last updated 3 mins ago

CARD COLUMNS
Card title that wraps to a new line

This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title

Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 3 mins ago

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.

Someone famous in Source Title

Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 3 mins ago

Fusce finibus sed augue quis volutpat. Duis non cursus felis. Nunc tristique lacinia orci, vel iaculis ipsum pretium at. Nullam ac mattis eros. Quisque a mauris in ex vulputate accumsan.

Someone famous in Source Title

Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.

Last updated 3 mins ago

Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 3 mins ago

Card title

This card has supporting text below as a natural lead-in to additional content.

Last updated 3 mins ago

Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

App Settings
Dark Mode NEW
Adjust the appearance to reduce glare and give your eyes a break.
Header Fixed
Header Inverse
Sidebar Fixed
Sidebar Grid
Gradient Enabled
Admin Design (6)
Language Version (9)
Frontend Design (5)
Documentation Reset Local Storage