Themes

Select a demo

Classic
Coming Soon

Dark Theme

Card

Bootstrap’s cards provide a flexible and extensible content container with multiple variants and options.

Placeholder
Basic Example

This is an example of a basic card. Cards have no fixed width to start, so they’ll naturally fill the full width of its parent element. This is easily customized with our various sizing options.

Go somewhere
Special title treatment

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

Go somewhere
...
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

The building block of a card is the .card-body. Use it whenever you need a padded section within a card.
Titles, Text, and Links
Card subtitle

Card titles are used by adding .card-title to a <h*> tag. In the same way, links are added and placed next to each other by adding .card-link to an <a> tag.

Subtitles are used by adding a .card-subtitle to a <h*> tag. If the .card-title and the .card-subtitle items are placed in a .card-body item, the card title and subtitle are aligned nicely.

Card link Another link
Special title treatment

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

Go somewhere
Special title treatment

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

Go somewhere
  • Cras justo odio
  • Dapibus ac facilisis in
  • Vestibulum at eros
Featured
  • Cras justo odio
  • Dapibus ac facilisis in
  • Vestibulum at eros
Featured
Special title treatment

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

Go somewhere
2 days ago
Special title treatment

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

Go somewhere
2019 © stacks