Styling React-Bootstrap Card Text, Background Color, & Borders

We can add custom styling to React Bootstrap cards using built-in Bootstrap classes, custom classes, and even through changing .scss variables. In this demo I will use all three methods to add borders, text color and font size, and background color to a Card component.

Here’s what we will build in this tutorial:

Styling React-Bootstrap Card Text, Background Color, and Borders Example
Styling React-Bootstrap Card Text, Background Color, and Borders Example

I think the best styling method is to use built-in Bootstrap utility classes like border-primary. A close second is targeting existing Bootstrap classes like .card-title.

How to Style React Bootstrap Card Text

My primary approach for styling the Card component will be to use Bootstrap 5’s built-in utility classes. Bootstrap comes packaged with many classes for controlling font color and font size, among other things.

I want to set the card body to a dark text because I plan to add a background color later. I also want the title to have the primary color and a large font. You can see the text-dark and text-primary fs-1 on the respective components below.

<Card className="">
  <Card.Body className="text-dark">
    <Card.Title className="text-primary fs-1">Title Component Area</Card.Title>
    <Card.Text className="">
      Card Text Component - the width of the card is dynamic and based on content
    </Card.Text>
    <div className="d-flex justify-content-between">
      <Button className="ms-3">Add</Button>
      <Button className="me-3">Remove</Button>
    </div>
  </Card.Body>
</Card>

Here’s the card so far, and notice the styling provided by the classes in dev tools:

Bootstrap card with primary text color and font size 1 utilities
Bootstrap card with primary text color and font size 1 utilities

Another option for adding these stylings is to target existing Bootstrap classes or add our own custom classes to the card body and card text components. Here’s what the styling code looks like if I target existing classes:

.card-title {
  font-size: 2rem; //close to fs-1
  color: $primary;
}

.card-body {
  color: rgb(13, 110, 253); // this is the text-dark color
}

Here’s a great tutorial on adding images to cards.

How to Style React Bootstrap Card Background Color

Next I want to add a light red background color to the React Bootstrap card. I can use the existing bg-danger utility class to add a red background, but it’s too strong. I want to lighten the color some.

To lighten the color, I can target the opacity value --bs-bg-opacity and override it. Here’s the code where I override it and also apply bg-danger to the card body:

//.scss file
.card-body {
  --bs-bg-opacity: 0.4;
}

//JSX
<Card.Body className="bg-danger text-dark">

Notice that I had to wrap the opacity value inside card-body. This was necessary to make the selector specific enough to override the default value.

Here’s the card styling. Notice that we can see the changes in dev tools:

Override Bootstrap --bs-bg-opacity value
Override Bootstrap –bs-bg-opacity value

Alternatively, you can simply apply a class to the card body:

.card-body {
   background-color: rgb(220, 53, 69);
}

I don’t have any opacity set and I didn’t match the bg-warning color. Consider changing the background color on Card hover.

How to Style React Bootstrap Card Borders

Adding borders to the React Bootstrap card is not as simple as it first seems. The card body comes with padding that makes the borders of subcomponents not stretch the entire width of the card. This means we need to selectively remove padding as we add borders.

First, we need to strip the left and right (start and end) borders off the card body. This can be done with ps-0 and pe-0 utilities. Next we need to restore some padding to the card text and card title areas with the p-3 utility.

Bootstrap padding utilities in Cards
Bootstrap padding utilities in Cards

It looks the same so far, which is good. Now we can add border classes to the wrapping Card and the card title components. The completed code is below:

<Card className="border border-primary border-4">
  <Card.Body className="ps-0 pe-0 bg-danger text-dark">
    <Card.Title className="border-bottom border-secondary border-1 text-primary fs-1 p-3">Title Component Area</Card.Title>
    <Card.Text className="p-3">

And here is the final product:

React Bootstrap Card with Borders
React Bootstrap Card with Borders

You may have noticed the card in the intro section has an orange title border. We can customize the color of the border-secondary class by changing the $secondary Bootstrap variable: $secondary: orange;. Now any components using a “secondary” class will have this updated color, whether borders, background, text color, or anything else.

If we didn’t want to use utilities, but instead use direct CSS, we could add styling with the code below:

.card {
  border: 4px solid;
  border-color: $primary;
}

.card-title {
  border-bottom: 1px solid grey;
}

.card-body {
  padding-left: 0px;
  padding-right: 0px;
}
Share this post:

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.