thead-dark not work in angular project using bootstrap

Issue

I try to add thead-dark into my table but is does not work. I'm using bootstrap.

My code:

<table class="table">
    <thead class="thead-dark">
        <tr>
            <th>Name</th>
            <th>Price</th>
            <th>Units In Stock</th>
        </tr>
    </thead>

Bootstrap :

....
  <meta name="viewport" content="width=device-width, initial-scale=1">  
  <!-- Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
....

It's last version of bootstrap not support thead-dark?

How to proceed?

Solution

Can you please check the below code? Hope it will work for you. In latest version of bootstrap, we can use "table-dark" class instead of "thead-dark". You can use "table-dark" class in thead, tr, and td also.

Please refer to this link: https://jsfiddle.net/yudizsolutions/qomrf9pk/

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">

<table class="table">
  <thead class="table-dark">
    <tr>
      <th>Name</th>
      <th>Price</th>
      <th>Units In Stock</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Demo Name</td>
      <td>500</td>
      <td>50</td>
    </tr>
  </tbody>
</table>

Answered By - Yudiz Solutions