<div class="table-responsive">
<table class="table">
    <thead class="bg-primary text-white">
        <tr>
            <th>#</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Username</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>نگین</td>
            <td>ایچ من</td>
            <td>@Sonu</td>
        </tr>
        <tr>
            <td>2</td>
            <td>دش ماخ</td>
            <td>پرو هاسکا</td>
            <td>@Genelia</td>
        </tr>
        <tr>
            <td>3</td>
            <td>روشن</td>
            <td>روگهان</td>
            <td>@Hritik</td>
        </tr>
    </tbody>
</table>
</div>

<div class="table-responsive">
<table class="table">
    <thead class="bg-success text-white">
        <tr>
            <th>#</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Username</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>نگین</td>
            <td>ایچ من</td>
            <td>@Sonu</td>
        </tr>
        <tr>
            <td>2</td>
            <td>دش ماخ</td>
            <td>پرو هاسکا</td>
            <td>@Genelia</td>
        </tr>
        <tr>
            <td>3</td>
            <td>روشن</td>
            <td>روگهان</td>
            <td>@Hritik</td>
        </tr>
    </tbody>
</table>
</div>

<div class="table-responsive">
<table class="table">
    <thead class="bg-info text-white">
        <tr>
            <th>#</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Username</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>نگین</td>
            <td>ایچ من</td>
            <td>@Sonu</td>
        </tr>
        <tr>
            <td>2</td>
            <td>دش ماخ</td>
            <td>پرو هاسکا</td>
            <td>@Genelia</td>
        </tr>
        <tr>
            <td>3</td>
            <td>روشن</td>
            <td>روگهان</td>
            <td>@Hritik</td>
        </tr>
    </tbody>
</table>
</div>

<div class="table-responsive">
<table class="table">
    <thead class="bg-warning text-white">
        <tr>
            <th>#</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Username</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>نگین</td>
            <td>ایچ من</td>
            <td>@Sonu</td>
        </tr>
        <tr>
            <td>2</td>
            <td>دش ماخ</td>
            <td>پرو هاسکا</td>
            <td>@Genelia</td>
        </tr>
        <tr>
            <td>3</td>
            <td>روشن</td>
            <td>روگهان</td>
            <td>@Hritik</td>
        </tr>
    </tbody>
</table>
</div>

<div class="table-responsive">
  <table class="table">
      <thead class="bg-danger text-white">
          <tr>
              <th>#</th>
              <th>First Name</th>
              <th>Last Name</th>
              <th>Username</th>
          </tr>
      </thead>
      <tbody>
          <tr>
              <td>1</td>
              <td>نگین</td>
              <td>ایچ من</td>
              <td>@Sonu</td>
          </tr>
          <tr>
              <td>2</td>
              <td>دش ماخ</td>
              <td>پرو هاسکا</td>
              <td>@Genelia</td>
          </tr>
          <tr>
              <td>3</td>
              <td>روشن</td>
              <td>روگهان</td>
              <td>@Hritik</td>
          </tr>
      </tbody>
  </table>
</div>

<div class="table-responsive">
  <table class="table">
      <thead class="bg-inverse text-white">
          <tr>
              <th>#</th>
              <th>First Name</th>
              <th>Last Name</th>
              <th>Username</th>
          </tr>
      </thead>
      <tbody>
          <tr>
              <td>1</td>
              <td>نگین</td>
              <td>ایچ من</td>
              <td>@Sonu</td>
          </tr>
          <tr>
              <td>2</td>
              <td>دش ماخ</td>
              <td>پرو هاسکا</td>
              <td>@Genelia</td>
          </tr>
          <tr>
              <td>3</td>
              <td>روشن</td>
              <td>روگهان</td>
              <td>@Hritik</td>
          </tr>
      </tbody>
  </table>
</div>

<div class="table-responsive">
  <table class="table table-bordered border-primary">
      <thead class="bg-primary text-white">
          <tr>
              <th>#</th>
              <th>First Name</th>
              <th>Last Name</th>
              <th>Username</th>
          </tr>
      </thead>
      <tbody>
          <tr>
              <td>1</td>
              <td>نگین</td>
              <td>ایچ من</td>
              <td>@Sonu</td>
          </tr>
          <tr>
              <td>2</td>
              <td>دش ماخ</td>
              <td>پرو هاسکا</td>
              <td>@Genelia</td>
          </tr>
          <tr>
              <td>3</td>
              <td>روشن</td>
              <td>روگهان</td>
              <td>@Hritik</td>
          </tr>
      </tbody>
  </table>
</div>

<div class="table-responsive">
<table class="table table-bordered border-success">
    <thead class="bg-success text-white">
        <tr>
            <th>#</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Username</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>نگین</td>
            <td>ایچ من</td>
            <td>@Sonu</td>
        </tr>
        <tr>
            <td>2</td>
            <td>دش ماخ</td>
            <td>پرو هاسکا</td>
            <td>@Genelia</td>
        </tr>
        <tr>
            <td>3</td>
            <td>روشن</td>
            <td>روگهان</td>
            <td>@Hritik</td>
        </tr>
    </tbody>
</table>
</div>

<div class="table-responsive">
<table class="table border-info table-bordered">
    <thead class="bg-info text-white">
        <tr>
            <th>#</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Username</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>نگین</td>
            <td>ایچ من</td>
            <td>@Sonu</td>
        </tr>
        <tr>
            <td>2</td>
            <td>دش ماخ</td>
            <td>پرو هاسکا</td>
            <td>@Genelia</td>
        </tr>
        <tr>
            <td>3</td>
            <td>روشن</td>
            <td>روگهان</td>
            <td>@Hritik</td>
        </tr>
    </tbody>
</table>
</div>

<div class="table-responsive">
<table class="table table-bordered border-warning">
    <thead class="bg-warning text-white">
        <tr>
            <th>#</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Username</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>نگین</td>
            <td>ایچ من</td>
            <td>@Sonu</td>
        </tr>
        <tr>
            <td>2</td>
            <td>دش ماخ</td>
            <td>پرو هاسکا</td>
            <td>@Genelia</td>
        </tr>
        <tr>
            <td>3</td>
            <td>روشن</td>
            <td>روگهان</td>
            <td>@Hritik</td>
        </tr>
    </tbody>
</table>
</div>

<div class="table-responsive">
<table class="table table-bordered border-danger">
    <thead class="bg-danger text-white">
        <tr>
            <th>#</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Username</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>نگین</td>
            <td>ایچ من</td>
            <td>@Sonu</td>
        </tr>
        <tr>
            <td>2</td>
            <td>دش ماخ</td>
            <td>پرو هاسکا</td>
            <td>@Genelia</td>
        </tr>
        <tr>
            <td>3</td>
            <td>روشن</td>
            <td>روگهان</td>
            <td>@Hritik</td>
        </tr>
    </tbody>
</table>
</div>

<div class="table-responsive">
<table class="table table-bordered border-dark">
    <thead class="bg-inverse text-white">
        <tr>
            <th>#</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Username</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>نگین</td>
            <td>ایچ من</td>
            <td>@Sonu</td>
        </tr>
        <tr>
            <td>2</td>
            <td>دش ماخ</td>
            <td>پرو هاسکا</td>
            <td>@Genelia</td>
        </tr>
        <tr>
            <td>3</td>
            <td>روشن</td>
            <td>روگهان</td>
            <td>@Hritik</td>
        </tr>
    </tbody>
</table>
</div>

<div class="table-responsive">
<table class="table table-hover table-primary">
    <thead class="bg-primary text-white">
        <tr>
            <th scope="col">#</th>
            <th scope="col">First</th>
            <th scope="col">Last</th>
            <th scope="col">Handle</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">1</th>
            <td>Mark</td>
            <td>Otto</td>
            <td>@mdo</td>
        </tr>
        <tr>
            <th scope="row">2</th>
            <td>جاکوب</td>
            <td>تورنت</td>
            <td>@fat</td>
        </tr>
        <tr>
            <th scope="row">3</th>
            <td colspan="2">لری پرنده</td>
            <td>@twitter</td>
        </tr>
    </tbody>
</table>
</div>

<div class="table-responsive">
<table class="table table-hover table-success">
  <thead class="bg-success text-white">
      <tr>
          <th scope="col">#</th>
          <th scope="col">First</th>
          <th scope="col">Last</th>
          <th scope="col">Handle</th>
      </tr>
  </thead>
  <tbody>
      <tr>
          <th scope="row">1</th>
          <td>Mark</td>
          <td>Otto</td>
          <td>@mdo</td>
      </tr>
      <tr>
          <th scope="row">2</th>
          <td>جاکوب</td>
          <td>تورنت</td>
          <td>@fat</td>
      </tr>
      <tr>
          <th scope="row">3</th>
          <td colspan="2">لری پرنده</td>
          <td>@twitter</td>
      </tr>
  </tbody>
</table>
</div>

<div class="table-responsive">
<table class="table table-hover table-info">
    <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>
    <tbody>
        <tr>
            <th scope="row">1</th>
            <td>Mark</td>
            <td>Otto</td>
            <td>@mdo</td>
        </tr>
        <tr>
            <th scope="row">2</th>
            <td>جاکوب</td>
            <td>تورنت</td>
            <td>@fat</td>
        </tr>
        <tr>
            <th scope="row">3</th>
            <td colspan="2">لری پرنده</td>
            <td>@twitter</td>
        </tr>
    </tbody>
</table>
</div>

<div class="table-responsive">
<table class="table table-hover table-warning">
    <thead class="bg-warning text-white">
        <tr>
            <th scope="col">#</th>
            <th scope="col">First</th>
            <th scope="col">Last</th>
            <th scope="col">Handle</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">1</th>
            <td>Mark</td>
            <td>Otto</td>
            <td>@mdo</td>
        </tr>
        <tr>
            <th scope="row">2</th>
            <td>جاکوب</td>
            <td>تورنت</td>
            <td>@fat</td>
        </tr>
        <tr>
            <th scope="row">3</th>
            <td colspan="2">لری پرنده</td>
            <td>@twitter</td>
        </tr>
    </tbody>
</table>
</div>

<div class="table-responsive">
<table class="table table-hover table-danger">
    <thead class="bg-danger text-white">
        <tr>
            <th scope="col">#</th>
            <th scope="col">First</th>
            <th scope="col">Last</th>
            <th scope="col">Handle</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">1</th>
            <td>Mark</td>
            <td>Otto</td>
            <td>@mdo</td>
        </tr>
        <tr>
            <th scope="row">2</th>
            <td>جاکوب</td>
            <td>تورنت</td>
            <td>@fat</td>
        </tr>
        <tr>
            <th scope="row">3</th>
            <td colspan="2">لری پرنده</td>
            <td>@twitter</td>
        </tr>
    </tbody>
</table>
</div>

<div class="table-responsive">
<table class="table table-hover table-dark">
    <thead class="bg-dark text-white">
        <tr>
            <th scope="col">#</th>
            <th scope="col">First</th>
            <th scope="col">Last</th>
            <th scope="col">Handle</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">1</th>
            <td>Mark</td>
            <td>Otto</td>
            <td>@mdo</td>
        </tr>
        <tr>
            <th scope="row">2</th>
            <td>جاکوب</td>
            <td>تورنت</td>
            <td>@fat</td>
        </tr>
        <tr>
            <th scope="row">3</th>
            <td colspan="2">لری پرنده</td>
            <td>@twitter</td>
        </tr>
    </tbody>
</table>
</div>