Connectcloseadjustpanorama_fish_eye

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-titleto a <h*>tag. In the same way,links are added and placed next to each other by adding .card-linkto an <a>tag.

Subtitles are used by adding a .card-subtitleto a <h*>tag. If the .card-titleand the .card-subtitleitems are placed in a .card-bodyitem,the card title and subtitle are aligned nicely.

Card linkAnother 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