The Ultimate Guide to Bootstrap Table Color: 5 Examples!

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>
  );
}