reactjs - Am not getting the Bootstrap primary color

Question

I am not getting the primary color for my table headers even though I specified table-primary. It instead shows lightblue. How do I get it to show the actual primary color in the table header? Many thanks in advance and greatly appreciate any helps. Thanks

 <table className="table table-striped table-hover">
    <thead>
      <tr className="table-primary">
          <th>Category Name</th>
          <th>Edit</th>
      </tr>
    </thead>

Answer 1

These properties give the colors as below image:

  <tr class="table-active">...</tr>
  <tr class="table-primary">...</tr>
  <tr class="table-secondary">...</tr>
  <tr class="table-success">...</tr>
  <tr class="table-danger">...</tr>
  <tr class="table-warning">...</tr>
  <tr class="table-info">...</tr>
  <tr class="table-light">...</tr>
  <tr class="table-dark">...</tr>

These properties give the colors as below image:

<tr class="bg-primary">...</tr>
<tr class="bg-success">...</tr>
<tr class="bg-warning">...</tr>
<tr class="bg-danger">...</tr>
<tr class="bg-info">...</tr>

So if you want to get the primary color as the actual primary color.You can use bg-primary instead of table-primary

For further details, refer:

https://getbootstrap.com/docs/4.1/content/tables/