Table with class table-Striped does not change line color

Question

Good evening everyone, I am trying to change the color of a row in a table with the table-Striped (zebrad) class, but it seems that the table-Striped rule overrides my rule: tr class="{$p->quantity <= 1 ? 'bg-Danger' : ''}}" as you can see in the code below:

<table class="table table-striped table-bordered">
<thead class="thead-dark">
    <td class="bg-primary"><strong>Nome</strong></td>
    <td class="bg-primary"><strong>Valor</strong></td>
    <td class="bg-primary"><strong>Descrição</strong></td>
    <td class="bg-primary"><strong>Qtde</strong></td>
    <td class="bg-primary"><strong>Tamanho</strong></td>
    <td class="bg-primary"><strong></strong></td>
    <td class="bg-primary"><strong></strong></td>
</thead>
<tbody>
    @foreach($produtos as $p)        
    <tr class="{{$p->quantidade <= 1 ? 'bg-danger' : ''}}">
        <td>{{ $p->nome }}</td>
        <td>{{ $p->valor }}</td>
        <td>{{ $p->descricao }}</td>
        <td>{{ $p->quantidade }}</td>
        <td>{{ $p->tamanho }}</td>
        <td>
            <a type="submit" href="/produtos/mostra/{{$p->id}}">
                <span class="glyphicon glyphicon-search"></span>
            </a>
        </td>
        <td>
            <a type="submit" href="/produtos/remove/{{$p->id}}">
                <span class="glyphicon glyphicon-trash text-danger"></span>
            </a>
        </td>
    </tr>
    @endforeach
</tbody>

The problem is that my table keeps the red lines only in even columns, when it is an odd column the row is not turning red. But if I remove the table-Striped class my rule works, can anyone help me with this error? Picture of table with error: https://ibb.co/SVSy006 Table image without error: https://ibb.co/z6LcsqL

Answer 1

bootstrap defines the odd line with code:

.table-striped>tbody>tr:nth-of-type(odd) { background-color: #f9f9f9; }

then to override this definition you must follow the same hierarchy in the statement of the bg-Danger line:

.table-striped>tbody>tr.bg-danger:nth-of-type(odd) { background-color:red; }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css" rel="stylesheet"/>

<table class="table table-striped">
  <thead>
    <tr>
      <th>id</th>
      <th>nome</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Anna</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Debbie</td>
    </tr>
    <tr class='bg-danger '>
      <td>3</td>
      <td>John</td>
    </tr>
  </tbody>
</table>