Basic Cards

A basic card is created with the .card class, and content inside the card has a .card-body class.

Header and Footer

The .card-header class adds a heading to the card and the .card-footer class adds a footer to the card.

Contextual Cards

To add a background color the card, use contextual classes (.bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark and .bg-light.

Titles, text, and links

Use .card-title to add card titles to any heading element. The .card-text class is used to remove bottom margins for a p> element if it is the last child (or the only one) inside .card-body. The .card-link class adds a blue color to any link, and a hover effect.

Card Images

Add .card-img-top or .card-img-bottom to an img> to place the image at the top or at the bottom inside the card. Note that we have added the image outside of the .card-body to span the entire width.