Components

## Cards

Bootstrap’s cards provide 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 Styling

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.

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

This is some text within a card body.

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

##### Kitchen Sink

Mix and match multiple content types to create the card you need, or throw everything in there. Shown below are image styles, blocks, text styles, and a list group—all wrapped in a fixed-width card.

##### Card title

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

- An item
- A second item
- A third item

Card link Another link

##### Header & Footer

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

Featured

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

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

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

##### Grid Cards

Use the Bootstrap grid system and its `.row-cols` classes to control how many grid columns (wrapped around your cards) you show per row. For example, here’s `.row-cols-1` laying out the cards on one column, and `.row-cols-md-2` splitting four cards to equal width across multiple rows, from the medium breakpoint up.

##### Card title

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

##### Card title

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

##### Card title

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

##### Card title

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