# Cards

A flexible and extensible content container with multiple variants and options. Read the Official Bootstrap Documentation for a full list of instructions and other options.

#### Basic Example

Below is an example of a basic card with mixed content and a fixed width. Cards have no fixed width to start, so they’ll naturally fill the full width of its parent element. This is easily customized with our various sizing options.

##### Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere

#### Content types

Cards support a wide variety of content, including images, text, list groups, links, and more. Below are examples of what’s supported.

#### Body

The building block of a card is the `.card-body`. Use it whenever you need a padded section within a card.

This is some text within a card body.

#### Titles, text, and links

Subtitles are used by adding a `.card-subtitle` to a `<h*>` tag. If the `.card-title` and the `.card-subtitle` items are placed in a `.card-body` item, the card title and subtitle are aligned nicely.

##### Card title

###### Card subtitle

Some quick example text to build on the card title and make up the bulk of the card's content.

Card link Another link

#### Images

`.card-img-top` places an image to the top of the card. With `.card-text`, text can be added to the card. Text within `.card-text` can also be styled with the standard HTML tags.

Some quick example text to build on the card title and make up the bulk of the card's content.

Some quick example text to build on the card title and make up the bulk of the card's content.

#### List groups

Create lists of content in a card with a flush list group.

- Cras justo odio
- Dapibus ac facilisis in
- Vestibulum at eros

Featured

- Cras justo odio
- Dapibus ac facilisis in
- Vestibulum at eros

#### Header & Footer

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

Card header

##### 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

#### Sizing

Cards assume no specific `width` to start, so they’ll be 100% wide unless otherwise stated. You can change this as needed with custom CSS, grid classes, grid Sass mixins, or utilities.

##### 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 content.

Go somewhere

#### Card navigation

Add some navigation to a card’s header (or block) with Bootstrap’s nav components.

##### Special title treatment

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

Go somewhere

#### Image overlay

Turn an image into a card background and overlay your card’s text. Depending on the image, you may or may not need additional styles or utilities.

##### 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

#### Background Color

Use text and background utilities to change the appearance of a card.

Header

##### Primary card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header

##### Secondary card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header

##### Success card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header

##### Danger card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header

##### Warning card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header

##### Info card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header

##### Light card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header

##### Dark card title

Some quick example text to build on the card title and make up the bulk of the card's content.

#### Card groups

Use card groups to render cards as a single, attached element with equal width and height columns. Card groups use `display: flex;` to achieve their uniform sizing.

##### 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

#### 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 columns

Cards can be organized into Masonry-like columns with just CSS by wrapping them in `.card-columns`. Cards are built with CSS `column` properties instead of flexbox for easier alignment. Cards are ordered from top to bottom and left to right.

##### 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.

##### 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.

##### Card title

This card has a regular title and short paragraphy of text below it.

Last updated 3 mins ago

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

##### Card title

This is another card with title and supporting text below. This card has some additional content to make it slightly taller overall.

Last updated 3 mins ago