Home » React JS » How to use React Bootstrap Card

How to use React Bootstrap Card

By Emily

After writing a post about using Bootstrap with React Forms, and then following up with a post explaining how to use Bootstrap React icons, this post will explain how to use the React Card component with Bootstrap. I’ll include code several examples showing different React Bootstrap cards, and will show how to change the background color, text color, size, and style.

Table of contents

Create React app & install Bootstrap

The detailed steps of how to get to this stage are covered in my previous post using Bootstrap with React, so I’d suggest following the steps in there and then return to this post to continue.

Import the React-Bootstrap Card component

To import the react-bootstrap/Card component add this line to your code:

import Card from 'react-bootstrap/Card';

Use holder.js for images in your React app

In the official documentation for the most basic card example, they use an image from something called holder.js. Holder.Js is an npm package that provides renedered holding images in your React project. To use it, install the holder.js npm package by typing:

npm install holderjs

… and by including this import statement in your App.js file:

import 'holderjs';

Use the Boostrap Card component in your code

To use the Card in your code add this code to get started. It is the simple example from the documentation and I’d recommended starting with this and building on it:

      <Card style={{ width: "18rem" }}>
        <Card.Img variant="top" src="holder.js/100px180" />
        <Card.Body>
          <Card.Title>A product name</Card.Title>
          <Card.Text>
            Some main content text can go here, a product description for example
          </Card.Text>
          <Button variant="primary">View</Button>
        </Card.Body>
      </Card>

I’d recommend referring to the official documentation too, for up to date examples.

Different card styles

There are many ways of styling the Bootstrap Card component in React. You can change the background color of the card, and change the text color. You can add a footer – really useful for some kind of status message, or product information for example price, or stock quantity. I’ll start by describing how to change some simple elements of the card, like background color.

React Bootstrap card background color

Use the bg prop to change the background color of the Card component as shown in this example. This example shows the color being set to ‘primary‘, one of several preset colors as defined here. The value inside the quotes will show up in an autocomplete list in Visual Studio Code (or whatever your code editor is). It’s that simple to change the background color of a Bootstrap react card. :

<Card bg="primary" style={{ width: "18rem" }}>
...

If you want to add a footer to the card, it’s also really simple using this code:

<Card>
...
</Card.Body>
   <Card.Footer>
       <small className="text-muted">Last updated 3 mins ago</small>
   </Card.Footer>
</Card>

The key point here is to remember to add the Card.Footer element after the Body element.

Add a Header To the Card

To add a header to the card insert this code before the Body element :

<Card.Header as="h5">Header text</Card.Header>

Change the width of a React Bootstrap Card

By default the React Card component is full width, meaning it will expand to fill the width of it’s parent container. If you want to make your card a fixed width then add a style prop like this :

<Card style={{ width: "18rem" }}>
...