Cards
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.
Cards require a small amount of markup and classes to provide you with as much control as possible. These classes and markup are flexible though and can typically be remixed and extended with ease. For example, if your card has no flush content like images, feel free to put the .card-block
class on the .card element
to consolidate your markup.
Example:
Card (Default)
Card (Understated)
Card (Standout Highlight)
Card (Overstated)
Card (Primary)
Card with an Image
.card-img-top
places an image to the top of the card.

Card Variations:
As with most components, cards can be extended to display with a different style. Apply one of the following supported class names to the .card
div:
.card-default
.card-understated
.card-overstated
.card-standout
.card-primary
.card-danger
.card-inverted
Card decks
Need a set of equal width and height cards that aren’t attached to one another? Use card decks.

Card title
This is a longer 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
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 with Photos
Cards can be extended to include an optional photo background on the left or right. Add a .photo-right
or .photo-left
class to the .card
div.
Before the closing .card-body div, add a new div with a class of .photo
and also an inline style with a link to your background-image. e.g. style="background-image: url('/path/to/photo.jpg');"
Alternatively, webmasters can move this inline style to their own custom stylesheet if that is more preferable.
Card Default with Photo Left
This card uses the .photo-left
class. Maecenas faucibus mollis interdum. Aenean lacinia bibendum nulla sed consectetur. Vestibulum id ligula porta felis euismod semper. Donec ullamcorper nulla non metus auctor fringilla. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.