Cards

Bootstrap's cards provide a flexible and extensible content container with multiple variants and options.

Idea React provides the Card, CardHeader, CardBody, CardTitle, CardText, and CardFooter wrappers for these examples. Use other Bootstrap wrappers such as Button, Image, Nav, and ListGroup inside them.

Example

Cards are flexible and extensible content containers with support for headers and footers, a wide variety of content, contextual background colors, and additional display options. Cards have no fixed width to start, so they'll naturally fill the width of their parent element, or slot into your grid columns.

Card title

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

Go somewhere

How it works

Cards are built with as little markup and styles as possible, but still manage to deliver a ton of control and customization.

• Cards are flexbox containers, so they offer easy alignment via flexbox utilities and grid column classes.

• .card has no default padding, you need CardBody for that. Use it as a modifier class or a child element alongside headers, footers, images, and more. This allows greater flexibility with the least amount of overhead.

• Cards have no margin by default. Use margin utilities or gap utilities as needed.

• Cards can contain text, images, lists, and most other HTML.

• Choose semantic HTML that fits the content. We use <div>s for simplicity's sake in our documentation, but you can also use <section>, <article>, etc.

Content types

Body

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

For simple cards, you can render card-body directly on the card element.

Titles, text, and links

Card bodies arrange their direct children in a column and apply a consistent gap, so titles and text need no styles of their own. Use these optional classes as content hooks.

• For a title, use CardTitle (.card-title).
• For a subtitle, use .card-subtitle. It reduces the gap above the subtitle.
• For text, use CardText (.card-text).

Use type and color utilities as needed. A color utility on .card-subtitle overrides --card-subtitle-color. Links need no card-specific class.

Images

Place images anywhere in a card and style as you like.

Image within the body

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

Last updated 3 mins ago

Use .card-img-top and .card-img-bottom to round the top and bottom corners of the image.

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

When your card only contains a list group—no header, footer, or body—use a ListGroup on its own. A card already draws an outer border, so a default list group inside a card would double that border.

• An item
• A second item
• A third item

When you mix a list group with other card sub-components, set flush to drop the list's own outer border.

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 linkAnother link

Header and footer

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

Card headers can be styled by adding card-header to heading elements.

Width

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.

Grid

Using the grid, wrap cards in columns and rows as needed.

Utilities

Use our handful of available sizing utilities to quickly set a card's width.

Custom CSS

Use custom CSS in your stylesheets or as inline styles to set a width.

Navigation

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

This works with pills as well.

Images

Cards include a few options for working with images. Choose from appending "image caps" at either end of a card, overlaying images with card content, or simply embedding the image in a card.

Image caps

Similar to headers and footers, cards can include top and bottom "image caps"—images at the top or bottom of a card.

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

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

Note that content should not be larger than the height of the image. If content is larger than the image the content will be displayed outside the image.

Card row

Use the .card-row class to make a card horizontal. For image caps, use the .card-img-start or .card-img-end class to position the image at the (inline) start or end position of the card.

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

And with the reverse layout:

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

Theme variants

Customize cards by using our theme color utilities. By default, cards use bg for their background and border colors when applying a theme color. Use .card-subtle to swap the background and border colors for a more subtle look.

Translucent cards

Add .card-translucent to blur and saturate the background of a card. Header and footer backgrounds are also adjusted for a consistent look.

Card layout

In addition to styling the content within cards, Bootstrap includes a few options for laying out series of cards.

Card groups

Use card groups to render cards as a single, attached element with equal width and height columns. Card groups start off stacked and use display: flex; to become attached with uniform dimensions starting at the sm breakpoint.

This layout uses container queries, so wrap the card group in a query container—add the .contains-inline utility to a parent element—for the row layout to take effect. Without a query container, the cards remain stacked.

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

When using card groups with footers, their content will automatically line up.

Grid cards

Use the Bootstrap grid system and the Row cols props to control how many grid columns (wrapped around your cards) you show per row. For example, cols={1} lays out the cards on one column, and md={2} splits 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. This content is a little bit longer.

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.

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.

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.

Change it to md={3} and you'll see the fourth card wrap.

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.

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.

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.

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.

When you need equal height, add .h-100 to the cards. If you want equal heights by default, you can set $card-height: 100% in Sass.

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.

Just like with card groups, card footers will automatically line up.

Card title

This is a wider card with 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.

Last updated 3 mins ago

Card title

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

Last updated 3 mins ago

CSS

Cards use CSS variables for backgrounds, borders, and spacing. Theme variants set the theme tokens used by the card, and .card-subtle, .card-translucent, .card-row, and .card-sheet variants adjust the surface and layout. See the upstream card CSS for the variable and Sass reference.