Bootstrap: tr class "warning" doesn't work in striped-table

Question

I've got a table defined <table class="table table-striped"> with some rows like <tr class="success">, <tr class="info">, and <tr class="warning">.

The success and info table-rows show up fine: red and blue just as they should be. But the warning rows don't show yellow as expected. They're just regular, zebra-stripe white or gray.

Weird thing is, if I add table-hover to the table's classes, the warning rows will show yellow, but only when hovered. The success and info rows, however, always show their colors, hover or no.

Answer 1

Regarding this issue with v3.0.3 (which will be fixed in v3.1, whenever they release it), a quick/rough fix for this is to add !important overrides to some specific CSS for this issue:

.table-striped > tbody > tr > .danger,
.table-striped > tbody > .danger > td,
.table-striped > tbody > .danger > th {
  background-color: #f2dede !important;
}

Obviously add this for thead, tfoot etc and success, info etc if you use those. I'm only using danger, and only in the tbody. I put these modifications in my bootstrap.css file, so that when I upgrade to v3.1 it will update anyway.