Cards

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

Basic Example

Content types

Body

Use <Card.Body> to pad content inside a <Card>.

Alternatively, you can use this shorthand version for Cards with body only, and no other children

Title, text, and links

Using <Card.Title>, <Card.Subtitle>, and <Card.Text> inside the <Card.Body> will line them up nicely. <Card.Link>s are used to line up links next to each other.

<Card.Text> outputs <p> tags around the content, so you can use multiple <Card.Text>s to create separate paragraphs.

List Groups

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

Kitchen Sink

You may add a header by adding a <Card.Header> component.

A <CardHeader> can be styled by passing a heading element through the <as> prop

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.

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.

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

Card Styles

Background Color

You can change a card's appearance by changing their <bg>, and <text> props.

Border Color

Card layout

Card Groups

Card Deck

Card Columns

API

Card

import Card from 'react-bootstrap/Card'Copy import code for the Card component
Name Type Default Description
as
elementType
 <div>

You can use a custom element type for this component.
bg
'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light'

Sets card background
body
boolean
 false

When this prop is set, it creates a Card with a Card.Body inside passing the children directly to it
border
'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light'

Sets card border color
text
'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | 'white' | 'muted'

Sets card text color
bsPrefix
string
 'card'

Change the underlying component CSS base class name and modifier class names prefix. This is an escape hatch for working with heavily customized bootstrap css.

Card.Body

import Card from 'react-bootstrap/Card'Copy import code for the Card component
Name Type Default Description
as
elementType
 <div>

You can use a custom element type for this component.
bsPrefix required
string
 'card-body'

Change the underlying component CSS base class name and modifier class names prefix. This is an escape hatch for working with heavily customized bootstrap css.

Card.Img

import Card from 'react-bootstrap/Card'Copy import code for the Card component
Name Type Default Description
as
elementType
 <img>

You can use a custom element type for this component.
variant
'top' | 'bottom'
 null

Defines image position inside the card.
bsPrefix
string
 'card-img'

Change the underlying component CSS base class name and modifier class names prefix. This is an escape hatch for working with heavily customized bootstrap css.

Card.ImgOverlay

import Card from 'react-bootstrap/Card'Copy import code for the Card component
Name Type Default Description
as
elementType
 <div>

You can use a custom element type for this component.
bsPrefix required
string
 'card-img-overlay'

Change the underlying component CSS base class name and modifier class names prefix. This is an escape hatch for working with heavily customized bootstrap css.

CardDeck

import CardDeck from 'react-bootstrap/CardDeck'Copy import code for the CardDeck component
Name Type Default Description
as
elementType
 <div>

You can use a custom element type for this component.
bsPrefix required
string
 'card-deck'

Change the underlying component CSS base class name and modifier class names prefix. This is an escape hatch for working with heavily customized bootstrap css.

CardGroup

import CardGroup from 'react-bootstrap/CardGroup'Copy import code for the CardGroup component
Name Type Default Description
as
elementType
 <div>

You can use a custom element type for this component.
bsPrefix required
string
 'card-group'

Change the underlying component CSS base class name and modifier class names prefix. This is an escape hatch for working with heavily customized bootstrap css.

CardColumns

import CardColumns from 'react-bootstrap/CardColumns'Copy import code for the CardColumns component
Name Type Default Description
as
elementType
 <div>

You can use a custom element type for this component.
bsPrefix required
string
 'card-columns'

Change the underlying component CSS base class name and modifier class names prefix. This is an escape hatch for working with heavily customized bootstrap css.

© 2014–present Stephen J. Collings, Matthew Honnibal, Pieter Vanderwerff
Licensed under the MIT License (MIT).
https://react-bootstrap.github.io/components/cards/