1. Home
  2. Examples
  3. Cards

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)

button
Card Body

Card (Understated)

button
Card Body

Card (Standout Highlight)

button
Card Body

Card (Overstated)

button
Card Body

Card (Primary)

button
Card Body

Card with an Image

.card-img-top places an image to the top of the card.

Card image cap
Card title

Some example text. This is a sample link

Button
Footer

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 image cap
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 image cap
Card title

This card has supporting text below as a natural lead-in to additional content.

Last updated 3 mins ago

Card image cap
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.