How to change the color of a string in Bootstrap 3?

Question

I want to change the background color of alternating lines in the Bootstrap 3 grid. I thought I could create CSS and add it to the class in the div, but the color will not change.

Here is my CSS:

.row-buffer { margin-top:20px; margin-bottom:20px; } .row-even { background-color:#76A0D3; } .row-odd { background-color:#BDE3FB; } 

And my line is defined like this:

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

or

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

The line buffer works fine, but the line-even and ordinary lines do not seem to be any different? (My lines are defined in the container.)

Am I barking the wrong tree?

Answer 1

Unable to see your exact situation, I'm going to assume that you are having a problem due to the specifics of the selector. If bootstrap has a more specific selector than just .class, your rule never cancels it. You must either match or be more specific in your selector than the boot.

An easy way to typically get more specifics is to add an identifier to your selectors, for example:

 #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

This is a special selector that you can override to change the color of odd lines in Bootstrap:

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

Answer 3

I assume that you are trying to create different background styles / colors for alternating rows in a table.

The easiest way is to simply add a self tag

  <AlternatingRowStyle CssClass="danger" /> 

inside your table before the data. In the aspview gridview control, just put this after asp

gridview tag and before the column tag.

You will immediately see the effect, since Bootstrap has this predefined.

I hope my answer helps someone in the future.

Greetings!