Basic Tables header small text goes here...

<table class="table">
  ...
</table>

<table class="table table-hover">
  ...
</table>

<table class="table table-sm">
  ...
</table>

<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

<table class="table table-striped">
  ...
</table>

<table class="table table-bordered">
  ...
</table>

<table class="table align-middle">
  ...
</table>

<table class="table align-middle">
  <tbody>
    <tr>
      <!-- with input -->
      <td>
        <input type="text" class="form-control my-n1" />
      </td>
    </tr>
    
    <tr>
      <!-- with input-group -->
      <td>
        <div class="input-group my-n1"></div>
      </td>
    </tr>
    
    <tr>
      <!-- with btn-group -->
      <td>
        <div class="btn-group my-n1"></div>
      </td>
    </tr>
  </tbody>
</table>

<table class="table">
  <tbody>
    <tr class="table-active">...</tr>
    <tr class="table-info">...</tr>
    <tr class="table-success">...</tr>
    <tr class="table-warning">...</tr>
    <tr class="table-danger">...</tr>
  </tbody>
</table>