Bootstrap/docs/components/card.md

layout	title
page	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.

If you're familiar with Bootstrap 3, cards replace our old panels, wells, and thumbnails. Similar functionality to those components is available as modifier classes for cards.

Basic example

Cards require very little markup, but do require some additional classes to give you as much control as possible. Create a .card, add any heading with .card-title, and use .card-text on paragraphs. These classes ensure proper spacing and alignment.

{% example html %}

Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere

{% endexample %}

Sizing

Cards are block-level by default, so they'll fill the available horizontal space. Constrain their widths via custom styles, our predefined grid classes, or our grid mixins.

{% example html %}

Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere

{% endexample %}

{% example html %}

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

{% endexample %}

Text alignment

You can quickly change the text alignment of any card—in its entirety or specific parts—with our text align classes.

{% example html %}

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

Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere

{% endexample %}

Header and footer

Add an optional header and/or footer within a card.

{% example html %}

Featured

Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere

Quote

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title

{% endexample %}

{% example html %}

Featured

Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere

2 days ago

Quote

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title

2 days ago

{% endexample %}

Image caps

Similar to headers and footers, cards include top and bottom image caps.

{% example html %}

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

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

{% endexample %}

Image overlays

Turn an image into a card background and overlay your card's text. Depending on the image, you may or may not need .card-inverse.

{% example html %}

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

{% endexample %}

Inverted text

Cards include a class for quickly toggling the text color. By default, cards use dark text and assume a light background. Add .card-inverse for white text on a dark background. You'll need to specify the background-color and border-color to go with it, or use the contextual backgrounds.

{% example html %}

Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere

{% endexample %}

Background variants

Cards include their own variant classes for quickly changing the background-color and border-color of a card. Darker colors require the use of .card-inverse.

{% example html %}

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title

{% endexample %}

Groups

Set a width on the .card-group, content automatically sizes for equal columns via display: table; and table-layout: fixed;. And because we're using table styles, we also get equal height for free.

{% example html %}

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

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

{% endexample %}

Sets

Get equal-width and equal-height cards by using two wrappers: .card-set-wrapper and a .card-set. We use table styles for the sizing and the gutters on .card-set. The .card-set-wrapper is used to negative margin out the border-spacing on the .card-set.

{% example html %}

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

{% endexample %}

Columns

Cards can be organized into columns by wrapping a group with .card-columns.

{% example html %}

Card title that wraps to a new line

This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title

Card title

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

Last updated 3 mins ago

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title

Card title

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

Last updated 3 mins ago

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title

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

{% endexample %}