React Bootstrap Card Component

Card with Bootstrap Styling

CoreUI PRO for React.js & Bootstrap

Bootstrap 5 components designed for React.js

This component is part of the CoreUI for React.js UI components library, which offers all Bootstrap components designed to work seamlessly with React.js.

If you want to use Bootstrap 5 in a React.js environment while also needing advanced components that Bootstrap does not offer and dedicated developer support, then this library is the best solution for you.

Learn how to use CoreUI’s React Bootstrap Card component to build flexible content containers with headers, footers, images, list groups, and responsive layouts.

About React Bootstrap Card Component#

The React Bootstrap Card component is a versatile container used to display content in a structured and responsive way. It supports images, headers, footers, background styles, and more—styled to match Bootstrap's visual language.

Example usage#

React Bootstrap Cards require minimal markup and offer maximum flexibility. They use flexbox for layout, have no default margins, and fill their parent container by default.

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 supported by React Bootstrap Card#

Card body#

The main block of the card is wrapped in <CCardBody> for consistent padding.

This is some text within a card body.

Use <CCardTitle>, <CCardSubtitle>, and <CCardLink> to structure text and links inside cards.

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

Images#

Use orientation="top" to position an image at the top of the card. Use <CCardText> to add and style text content.

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

List groups#

Display structured lists inside cards using flush list groups.

  • Cras justo odio
  • Dapibus ac facilisis in
  • Vestibulum at eros
Header
  • Cras justo odio
  • Dapibus ac facilisis in
  • Vestibulum at eros
  • Cras justo odio
  • Dapibus ac facilisis in
  • Vestibulum at eros

Kitchen sink#

Combine multiple content elements (e.g. image, text, list group) to create a comprehensive card layout.

Card title

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

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

Use <CCardHeader> and <CCardFooter> to add headers and footers. You can style headers with as="h5" or similar props.

Header
Special title treatment

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

Go somewhere
Header
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
Header
Special title treatment

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

Go somewhere

Sizing React Bootstrap Cards#

Cards are full-width by default. Control width using layout grids, utilities, or custom CSS.

Grid layout#

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

Utility classes#

Card title

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

Go somewhere
Card title

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

Go somewhere

Custom CSS#

Special title treatment

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

Go somewhere

Text alignment#

Use Bootstrap's text alignment utilities to position card content.

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

Add navigational elements using <CNav> inside a 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

Image placement in React Bootstrap Cards#

Image caps (top or bottom)#

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#

Overlay content on top of background images using Bootstrap utility classes.

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

Horizontal layout#

Use .g-0 and grid column classes to create responsive horizontal cards.

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

Styling options#

Background and text color#

Use the color prop to control card background and text color.

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.

Conveying meaning to assistive technologies

Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the .visually-hidden class.

Border customization#

Apply Bootstrap border utilities or the textColor prop to customize card borders.

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
dark card title

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

Top border only#

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
dark card title

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

Layout variations#

Card groups#

Group cards to render them with equal width and height.

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

Card title

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

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.

Grid-based cards#

Use <CRow> and grid props to control the layout of multiple cards in a responsive grid.

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.

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.

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.

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.

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.

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.

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.

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.

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.

Card title

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

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.

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.

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.

Card title

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

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.

API reference#