Not able to add background color to the table header in bootstrap -5

Question

I am trying to add background color to bootstrap table. Its not applying it.

 <table class="table table-dark table-hover">
        <thead class="bg-info text-white">
          <tr>
            <th scope="col">#</th>
            <th scope="col">First</th>
            <th scope="col">Last</th>
            <th scope="col">Handle</th>
          </tr>
        </thead>
</table>

Also tried this also

    <tr class="bg-info text-white">

Its not working.

I am using the bootstrap-5.

Whats going wrong here ?

Answer 1

It's because you are using table-dark in the <table> which is overriding any other style on the <thead>.

To see bg-info in action in <thead> you have to remove table-dark first.

<link href="https://getbootstrap.com/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet"/>

<!--With table-dark-->
 <table class="table table-dark table-hover">
   <thead class="bg-info text-white">
       <tr>
           <th scope="col">#</th>
           <th scope="col">First</th>
           <th scope="col">Last</th>
           <th scope="col">Handle</th>
       </tr>
   </thead>
</table>

<!--Without table-dark-->
<table class="table table-hover">
   <thead class="bg-info text-white">
       <tr>
           <th scope="col">#</th>
           <th scope="col">First</th>
           <th scope="col">Last</th>
           <th scope="col">Handle</th>
       </tr>
   </thead>
</table>