Bootstrap table striped: How do I change the stripe background colour?

Customizing Bootstrap Table Stripes: A CSS Guide

Learn how to easily change the background color of striped rows in Bootstrap tables using custom CSS, ensuring your tables match your brand's aesthetic.

Bootstrap's table-striped class provides an excellent way to improve readability by alternating row background colors. However, the default grey stripe might not always align with your design. This article will guide you through the process of overriding Bootstrap's default styling to apply your own custom background colors to striped table rows, ensuring your tables are both functional and visually consistent with your website's theme.

Understanding Bootstrap's Default Striping

Before we can change the stripe color, it's important to understand how Bootstrap applies it. The table-striped class targets tbody tr:nth-of-type(odd) (or even depending on the Bootstrap version and specific implementation) to apply a background color. This means we need to create a more specific CSS rule to override this default. The key is to target the same elements with a higher specificity or to use !important (though generally less recommended).

flowchart TD
    A[Bootstrap Table HTML] --> B{Add .table-striped class}
    B --> C[Bootstrap CSS applies default stripe]
    C --> D{Default: `tbody tr:nth-of-type(odd)` background-color}
    D --> E[Custom CSS Override]
    E --> F{Target `tbody tr:nth-of-type(odd)` with higher specificity}
    F --> G[Apply new `background-color`]
    G --> H[Custom Striped Table]

Flowchart illustrating Bootstrap's default striping and the custom override process.

Method 1: Overriding with Custom CSS

The most straightforward way to change the stripe color is by adding a custom CSS rule to your stylesheet. This rule should be placed after Bootstrap's CSS or within a custom stylesheet that is loaded after Bootstrap, to ensure it takes precedence. You'll target the nth-of-type(odd) or nth-of-type(even) pseudo-class within your table-striped element.

/* Custom CSS to change Bootstrap table stripe color */
.table-striped > tbody > tr:nth-of-type(odd) {
  background-color: #e6f2ff; /* Light blue */
}

/* Example for even rows if needed */
.table-striped > tbody > tr:nth-of-type(even) {
  background-color: #ffffff; /* White */
}

Custom CSS to change the background color of odd-numbered rows in a striped table.

<table class="table table-striped">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

Basic Bootstrap table structure with table-striped class.

Method 2: Creating a Custom Striped Table Class

If you need multiple types of striped tables with different colors, or if you want to avoid directly overriding Bootstrap's core classes, you can create your own custom class. This approach offers more flexibility and better organization for larger projects.

/* Custom striped table class */
.table-striped-custom > tbody > tr:nth-of-type(odd) {
  background-color: #ffe0b2; /* Light orange */
}

.table-striped-custom > tbody > tr:nth-of-type(even) {
  background-color: #fff3e0; /* Lighter orange */
}

Defining a new custom class for striped tables with unique colors.

<table class="table table-striped-custom">
  <thead>
    <tr>
      <th scope="col">Product</th>
      <th scope="col">Quantity</th>
      <th scope="col">Price</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Laptop</td>
      <td>1</td>
      <td>$1200</td>
    </tr>
    <tr>
      <td>Mouse</td>
      <td>2</td>
      <td>$25</td>
    </tr>
    <tr>
      <td>Keyboard</td>
      <td>1</td>
      <td>$75</td>
    </tr>
  </tbody>
</table>

Applying the custom striped table class to an HTML table.