The React-Bootstrap table component can be heavily customized to meet any styling needs. In this tutorial I will show how to add color styling to several parts of the table:
- Table Header Color
- Table Background Color
- Table Hover Color
- Table Border Color
- Table Row Color on Every Other Row (Custom Striped Color)
Here’s what we will create:

The table above also has a background color style on hover. These stylings are applied using classes and also by targeting some of the CSS tags applied by the striped
, hover
, and bordered
prop.
Full code for this tutorial is in the Resources section. Read this tutorial to learn how to style scrollbar colors on a Bootstrap table.
Add Custom Bootstrap Table Background Color
Adding background color to the table is relatively simple, but it may come with unintended consequences. Here’s the code:
//CSS
.custom-table {
background-color: red;
}
//JSX
<Table className="custom-table">...</Table>
Unlike the MUI table background color, adding background color to the bootstrap table fills all the cells with a background color.
Adding background color at the table level also means that if striped and hover is enabled, you may have an unexpected hover color on your striped rows.
Alternatively if you are using React-Bootstrap the table
element comes with a table
class on it. You can target this class and add background color to it.
Add Custom Bootstrap Table Header Color
If you want to add custom header color, add a class to the thead
element inside the table.
//css
.custom-header {
background-color: blue;
}
//jsx
<Table className="custom-table">
<thead className="custom-header">
At this point we have the following styling on our table:

Compare the Bootstrap table to a vanilla react table here.
Add Custom Color to Every Other Row (Custom Striped Prop) In a React-Bootstrap Table
If we want every other row to have a unique color and a ‘striped’ appearance, we need to add the striped
prop to the react-bootstrap table. However, this only makes every other row a slightly darker color than it’s current background (red from our table).
We also need to update the CSS tag --bs-table-striped-bg
. When striped
is true, this tag supplies styling to every other row. Here it is in dev tools:

Here’s the code to update this tag color:
//css
.table {
--bs-table-striped-bg: green;
}
//jsx
<Table className="custom-table" striped>
At this point we’ve created the table pictured in the intro section. In the section below, we will add hover styling.
Add Custom React-Bootstrap Table Hover Color
Hover styling requires two different selectors if we want to maintain a striped pattern on hover.
Initially I tried targeting the --bs-table-striped-bg
tag with a :hover pseudo class but was unsuccessful. Instead I created two different nth-child
selectors, one for even and one for odd rows:
tr:hover:nth-child(even) {
background-color: pink;
cursor: pointer;
}
tr:hover:nth-child(odd) {
background-color: lightgreen;
cursor: pointer;
}
//jsx
<Table className="custom-table" striped hover>
Make sure and add the hover
prop on the Table or else you need to make a much more complex selector to override the existing striped selector.
Here’s the result, with hover on an odd row:

Here’s how to make the table columns wider, and here’s how to add a tooltip on cell hover.
Add Custom React-Bootstrap Table Border Color
The final styling we will apply is border color. There is a handy bordered
prop and --bs-table-border-color
tag that can be used to apply this styling.
Add the tag override to the existing table
class:
//css
.table {
--bs-table-striped-bg: green;
--bs-table-border-color: grey;
}
//jsx
<Table className="custom-table" striped hover bordered>
And now we have border on every cell:

If you don’t like the size of the table cells, here’s how to change their height.
Resources
Here is the full code for this tutorial:
//css
.custom-table {
background-color: red;
}
.custom-header {
background-color: blue;
}
tr:hover:nth-child(even) {
background-color: pink;
cursor: pointer;
}
tr:hover:nth-child(odd) {
background-color: lightgreen;
cursor: pointer;
}
.table {
--bs-table-striped-bg: green;
--bs-table-border-color: grey;
}
//jsx
import React from "react";
import Table from "react-bootstrap/Table";
import { faker } from "@faker-js/faker";
import "./CustomTableColor.scss";
const addresses: {
[key: string]: any;
}[] = [];
for (let i = 0; i < 10; i++) {
addresses.push({
id: i + 1,
address: `${faker.address.streetAddress()} ${faker.address.secondaryAddress()}`,
zip: faker.address.zipCode(),
city: faker.address.city(),
state: faker.address.state()
});
console.log(faker.address)
}
export default function CustomTableColor() {
return (
<div style={{ marginTop: 24, marginLeft: 12 }}>
<Table className="custom-table" striped hover bordered>
<thead className="custom-header">
<tr>
<th>#</th>
<th>Street Address</th>
<th>Zip Code</th>
<th>City</th>
<th>State</th>
</tr>
</thead>
<tbody>
{addresses.map((address, index) => {
return (
<tr key={index} className="">
<td className="">{index + 1}</td>
<td className="">{address.address}</td>
<td className="">{address.zip}</td>
<td className="">{address.city}</td>
<td className="">{address.state}</td>
</tr>
);
})}
</tbody>
</Table>
</div>
);
}