How to change the colour of a row in Bootstrap 3?

Question

I want to change the background colour of alternating rows in a Bootstrap 3 grid. I thought that I could create some CSS and add it to the class in the div but the colour doesn't change.

Here's my CSS:

.row-buffer {
margin-top:20px;
margin-bottom:20px;
}

.row-even {
background-color:#76A0D3;
}
.row-odd {
background-color:#BDE3FB;
}

And my row is being defined like so:

<div class="row row-buffer row-even">

or:

<div class="row row-buffer row-odd">

The row-buffer is working perfectly but the row-even and row-odd don't seem to be making any difference? (My rows are being defined within a container.)

Am I barking up the wrong tree?

Answer 1

Without being able to see your exact situation I'm going to guess that you are having a problem due to selector specificity. If bootstrap has a more specific selector than just .class, then your rule will never override it. You either need to match or be more specific in your selector than bootstrap.

An easy way to typically gain a lot of specificity is to add an id to your selectors like :

#myrows .row-even {
    background-color:#76A0D3;
}
#myrows .row-odd {
    background-color:#BDE3FB;
}

I created a small example of how specificity can cause problems: http://jsfiddle.net/path411/JyUy2/

Answer 2

These are the specific selectors you can override to change the color of odd rows in Bootstrap:

.table-striped>tbody>tr:nth-child(odd)>td, 
.table-striped>tbody>tr:nth-child(odd)>th {
    background-color: #your-color;
}