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

.table-striped > tbody > tr:nth-child(2n+1) > td, .table-striped > tbody > tr:nth-child(2n+1) > th {
   background-color: red;
}

add this line into your style.css after main bootstrap.css or you could use (odd) or (even) instead of (2n+1)

Add the following CSS style after loading Bootstrap:

.table-striped>tbody>tr:nth-child(odd)>td, 
.table-striped>tbody>tr:nth-child(odd)>th {
   background-color: red; // Choose your own color here
 }

If you are using Bootstrap 3, you can use Florin's method, or use a custom CSS file.

If you use Bootstrap less source instead of processed css files, you can directly change it in bootstrap/less/variables.less.

Find something like:

//** Background color used for `.table-striped`.
@table-bg-accent:               #f9f9f9;

You have two options, either you override the styles with a custom stylesheet, or you edit the main bootstrap css file. I prefer the former.

Your custom styles should be linked after bootstrap.

<link rel="stylesheet" src="bootstrap.css">
<link rel="stylesheet" src="custom.css">

In custom.css

.table-striped>tr:nth-child(odd){
   background-color:red;
}

Related