Basic Card

Basic card

Card Header and Footer

Header
Content
Footer

Panels with Contextual Classes

Basic card

Primary card

Success card

Info card

Warning card

Danger card

Secondary card

Dark card

Light card

Card 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 in the card-body. The .card-link class adds a blue color to any link, and a hover effect.

Card title

Some example text. Some example text.

Card link Another link

Card Image

Image at the top (card-img-top):

Card image

John Doe

Some example text some example text. John Doe is an architect and engineer

See Profile

Image at the bottom (card-img-top):

Jane Doe

Some example text some example text. Jane Doe is an architect and engineer

See Profile
Card image

Card Image Overlay

Turn an image into a card background and use .card-img-overlay to overlay the card's text:

Card image

John Doe

Some example text some example text. Some example text some example text. Some example text some example text. Some example text some example text.

See Profile