@extends('layouts.contentLayoutMaster')
{{-- title --}}
@section('title','Bootstrap Tables')

@section('content')
<!-- Basic Tables start -->

<div class="row" id="basic-table">
  <div class="col-12">
    <div class="card">
      <div class="card-header">
        <h4 class="card-title">Basic Tables</h4>
      </div>
      <div class="card-body">
        <p class="card-text">Using the most basic table up, here’s how
          <code>.table</code>-based tables look in Bootstrap. You can use any example
          of below table for your table and it can be use with any type of bootstrap tables.</p>
        <p><span class="text-bold-600">Example 1:</span> Table with outer spacing</p>
        <!-- Table with outer spacing -->
        <div class="table-responsive">
          <table class="table">
            <thead>
              <tr>
                <th>NAME</th>
                <th>RATE</th>
                <th>SKILL</th>
                <th>TYPE</th>
                <th>LOCATION</th>
                <th>ACTION</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td class="text-bold-500">Michael Right</td>
                <td>$15/hr</td>
                <td class="text-bold-500">UI/UX</td>
                <td>Remote</td>
                <td>Austin,Taxes</td>
                <td><a href="javascript:void(0);"><i
                      class="badge-circle badge-circle-light-secondary bx bx-envelope font-medium-1"></i></a></td>
              </tr>
              <tr>
                <td class="text-bold-500">Morgan Vanblum</td>
                <td>$13/hr</td>
                <td class="text-bold-500">Graphic concepts</td>
                <td>Remote</td>
                <td>Shangai,China</td>
                <td><a href="javascript:void(0);"><i
                      class="badge-circle badge-circle-light-secondary bx bx-envelope font-medium-1"></i></a></td>
              </tr>
              <tr>
                <td class="text-bold-500">Tiffani Blogz</td>
                <td>$15/hr</td>
                <td class="text-bold-500">Animation</td>
                <td>Remote</td>
                <td>Austin,Texas</td>
                <td><a href="javascript:void(0);"><i
                      class="badge-circle badge-circle-light-secondary bx bx-envelope font-medium-1"></i></a></td>
              </tr>
              <tr>
                <td class="text-bold-500">Ashley Boul</td>
                <td>$15/hr</td>
                <td class="text-bold-500">Animation</td>
                <td>Remote</td>
                <td>Austin,Texas</td>
                <td><a href="javascript:void(0);"><i
                      class="badge-circle badge-circle-light-secondary bx bx-envelope font-medium-1"></i></a></td>
              </tr>
              <tr>
                <td class="text-bold-500">Mikkey Mice</td>
                <td>$15/hr</td>
                <td class="text-bold-500">Animation</td>
                <td>Remote</td>
                <td>Austin,Texas</td>
                <td><a href="javascript:void(0);"><i
                      class="badge-circle badge-circle-light-secondary bx bx-envelope font-medium-1"></i></a></td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
      <p class="px-2"><span class="text-bold-600">Example 2:</span> Minimal Table with no outer spacing.</p>

      <!-- Table with no outer spacing -->
      <div class="table-responsive">
        <table class="table mb-0">
          <thead>
            <tr>
              <th>NAME</th>
              <th>RATE</th>
              <th>SKILL</th>
              <th>TYPE</th>
              <th>LOCATION</th>
              <th>ACTION</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td class="text-bold-500">Michael Right</td>
              <td>$15/hr</td>
              <td class="text-bold-500">UI/UX</td>
              <td>Remote</td>
              <td>Austin,Taxes</td>
              <td><a href="javascript:void(0);"><i
                    class="badge-circle badge-circle-light-secondary bx bx-envelope font-medium-1"></i></a></td>
            </tr>
            <tr>
              <td class="text-bold-500">Morgan Vanblum</td>
              <td>$13/hr</td>
              <td class="text-bold-500">Graphic concepts</td>
              <td>Remote</td>
              <td>Shangai,China</td>
              <td><a href="javascript:void(0);"><i
                    class="badge-circle badge-circle-light-secondary bx bx-envelope font-medium-1"></i></a></td>
            </tr>
            <tr>
              <td class="text-bold-500">Tiffani Blogz</td>
              <td>$15/hr</td>
              <td class="text-bold-500">Animation</td>
              <td>Remote</td>
              <td>Austin,Texas</td>
              <td><a href="javascript:void(0);"><i
                    class="badge-circle badge-circle-light-secondary bx bx-envelope font-medium-1"></i></a></td>
            </tr>
            <tr>
              <td class="text-bold-500">Ashley Boul</td>
              <td>$15/hr</td>
              <td class="text-bold-500">Animation</td>
              <td>Remote</td>
              <td>Austin,Texas</td>
              <td><a href="javascript:void(0);"><i
                    class="badge-circle badge-circle-light-secondary bx bx-envelope font-medium-1"></i></a></td>
            </tr>
            <tr>
              <td class="text-bold-500">Mikkey Mice</td>
              <td>$15/hr</td>
              <td class="text-bold-500">Animation</td>
              <td>Remote</td>
              <td>Austin,Texas</td>
              <td><a href="javascript:void(0);"><i
                    class="badge-circle badge-circle-light-secondary bx bx-envelope font-medium-1"></i></a></td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>
<!-- Basic Tables end -->

<!--  Inverse table start -->
<div class="row" id="table-inverse">
  <div class="col-12">
    <div class="card">
      <div class="card-header">
        <h4 class="card-title">Inverse table</h4>
      </div>
      <div class="card-body">
        <p class="mb-0">You can also invert the colors—with light text on dark backgrounds—with <code class="highlighter-rouge">.table-dark</code>.</p>
      </div>
      <!-- table with dark -->
      <div class="table-responsive">
        <table class="table table-dark mb-0">
          <thead>
            <tr>
              <th>NAME</th>
              <th>RATE</th>
              <th>SKILL</th>
              <th>TYPE</th>
              <th>LOCATION</th>
              <th>ACTION</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td class="text-bold-500">Michael Right</td>
              <td>$15/hr</td>
              <td class="text-bold-500">UI/UX</td>
              <td>Remote</td>
              <td>Austin,Taxes</td>
              <td><a href="javascript:void(0);"><i class="badge-circle bx bx-envelope font-medium-1"></i></a></td>
            </tr>
            <tr>
              <td class="text-bold-500">Morgan Vanblum</td>
              <td>$13/hr</td>
              <td class="text-bold-500">Graphic concepts</td>
              <td>Remote</td>
              <td>Shangai,China</td>
              <td><a href="javascript:void(0);"><i class="badge-circle bx bx-envelope font-medium-1"></i></a></td>
            </tr>
            <tr>
              <td class="text-bold-500">Tiffani Blogz</td>
              <td>$15/hr</td>
              <td class="text-bold-500">Animation</td>
              <td>Remote</td>
              <td>Austin,Texas</td>
              <td><a href="javascript:void(0);"><i class="badge-circle bx bx-envelope font-medium-1"></i></a></td>
            </tr>
            <tr>
              <td class="text-bold-500">Ashley Boul</td>
              <td>$15/hr</td>
              <td class="text-bold-500">Animation</td>
              <td>Remote</td>
              <td>Austin,Texas</td>
              <td><a href="javascript:void(0);"><i class="badge-circle bx bx-envelope font-medium-1"></i></a></td>
            </tr>
            <tr>
              <td class="text-bold-500">Mikkey Mice</td>
              <td>$15/hr</td>
              <td class="text-bold-500">Animation</td>
              <td>Remote</td>
              <td>Austin,Texas</td>
              <td><a href="javascript:void(0);"><i class="badge-circle bx bx-envelope font-medium-1"></i></a></td>
            </tr>
          </tbody>
        </table>
      </div>
      <div class="card-body">
        <p class="mb-0">You can also invert the colors—with dark text on light backgrounds—with <code class="highlighter-rouge">.table-light</code>.</p>
      </div>
      <!-- table with light -->
      <div class="table-responsive">
        <table class="table table-light mb-0">
          <thead>
            <tr>
              <th>NAME</th>
              <th>RATE</th>
              <th>SKILL</th>
              <th>TYPE</th>
              <th>LOCATION</th>
              <th>ACTION</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td class="text-bold-500">Michael Right</td>
              <td>$15/hr</td>
              <td class="text-bold-500">UI/UX</td>
              <td>Remote</td>
              <td>Austin,Taxes</td>
              <td><a href="javascript:void(0);"><i
                    class="badge-circle badge-circle-white text-secondary bx bx-envelope font-medium-1"></i></a></td>
            </tr>
            <tr>
              <td class="text-bold-500">Morgan Vanblum</td>
              <td>$13/hr</td>
              <td class="text-bold-500">Graphic concepts</td>
              <td>Remote</td>
              <td>Shangai,China</td>
              <td><a href="javascript:void(0);"><i
                    class="badge-circle badge-circle-white text-secondary bx bx-envelope font-medium-1"></i></a></td>
            </tr>
            <tr>
              <td class="text-bold-500">Tiffani Blogz</td>
              <td>$15/hr</td>
              <td class="text-bold-500">Animation</td>
              <td>Remote</td>
              <td>Austin,Texas</td>
              <td><a href="javascript:void(0);"><i
                    class="badge-circle badge-circle-white text-secondary bx bx-envelope font-medium-1"></i></a></td>
            </tr>
            <tr>
              <td class="text-bold-500">Ashley Boul</td>
              <td>$15/hr</td>
              <td class="text-bold-500">Animation</td>
              <td>Remote</td>
              <td>Austin,Texas</td>
              <td><a href="javascript:void(0);"><i
                    class="badge-circle badge-circle-white text-secondary bx bx-envelope font-medium-1"></i></a></td>
            </tr>
            <tr>
              <td class="text-bold-500">Mikkey Mice</td>
              <td>$15/hr</td>
              <td class="text-bold-500">Animation</td>
              <td>Remote</td>
              <td>Austin,Texas</td>
              <td><a href="javascript:void(0);"><i
                    class="badge-circle badge-circle-white text-secondary bx bx-envelope font-medium-1"></i></a></td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>
<!-- Inverse table end -->
<!-- Table head options start -->
<div class="row" id="table-head">
  <div class="col-12">
    <div class="card">
      <div class="card-header">
        <h4 class="card-title">Table head options</h4>
      </div>
      <div class="card-body">
        <p>Similar to tables and dark tables, use the modifier classes <code
            class="highlighter-rouge">.thead-light</code> or <code class="highlighter-rouge">.thead-dark</code> to
          make <code class="highlighter-rouge">&lt;thead&gt;</code>s appear light or dark gray.</p>
      </div>
      <!-- table head dark -->
      <div class="table-responsive">
        <table class="table mb-0">
          <thead class="thead-dark">
            <tr>
              <th>NAME</th>
              <th>RATE</th>
              <th>SKILL</th>
              <th>TYPE</th>
              <th>LOCATION</th>
              <th>ACTION</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td class="text-bold-500">Michael Right</td>
              <td>$15/hr</td>
              <td class="text-bold-500">UI/UX</td>
              <td>Remote</td>
              <td>Austin,Taxes</td>
              <td><a href="javascript:void(0);"><i
                    class="badge-circle badge-circle-light-secondary bx bx-envelope font-medium-1"></i></a></td>
            </tr>
            <tr>
              <td class="text-bold-500">Morgan Vanblum</td>
              <td>$13/hr</td>
              <td class="text-bold-500">Graphic concepts</td>
              <td>Remote</td>
              <td>Shangai,China</td>
              <td><a href="javascript:void(0);"><i
                    class="badge-circle badge-circle-light-secondary bx bx-envelope font-medium-1"></i></a></td>
            </tr>
            <tr>
              <td class="text-bold-500">Tiffani Blogz</td>
              <td>$15/hr</td>
              <td class="text-bold-500">Animation</td>
              <td>Remote</td>
              <td>Austin,Texas</td>
              <td><a href="javascript:void(0);"><i
                    class="badge-circle badge-circle-light-secondary bx bx-envelope font-medium-1"></i></a></td>
            </tr>
            <tr>
              <td class="text-bold-500">Ashley Boul</td>
              <td>$15/hr</td>
              <td class="text-bold-500">Animation</td>
              <td>Remote</td>
              <td>Austin,Texas</td>
              <td><a href="javascript:void(0);"><i
                    class="badge-circle badge-circle-light-secondary bx bx-envelope font-medium-1"></i></a></td>
            </tr>
            <tr>
              <td class="text-bold-500">Mikkey Mice</td>
              <td>$15/hr</td>
              <td class="text-bold-500">Animation</td>
              <td>Remote</td>
              <td>Austin,Texas</td>
              <td><a href="javascript:void(0);"><i
                    class="badge-circle badge-circle-light-secondary bx bx-envelope font-medium-1"></i></a></td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>
<!-- Table head options end -->

<!-- Striped rows start -->
<div class="row" id="table-striped">
  <div class="col-12">
    <div class="card">
      <div class="card-header">
        <h4 class="card-title">Striped rows</h4>
      </div>
      <div class="card-body">
        <p class="card-text">Use <code class="highlighter-rouge">.table-striped</code> to add zebra-striping to any
          table row within the <code class="highlighter-rouge">&lt;tbody&gt;</code>. This styling doesn't work in IE8
          and below as <code>:nth-child</code> CSS selector isn't supported.</p>
      </div>
      <!-- table striped -->
      <div class="table-responsive">
        <table class="table table-striped mb-0">
          <thead>
            <tr>
              <th>NAME</th>
              <th>RATE</th>
              <th>SKILL</th>
              <th>TYPE</th>
              <th>LOCATION</th>
              <th>ACTION</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td class="text-bold-500">Michael Right</td>
              <td>$15/hr</td>
              <td class="text-bold-500">UI/UX</td>
              <td>Remote</td>
              <td>Austin,Taxes</td>
              <td><a href="javascript:void(0);"><i
                    class="badge-circle badge-circle-light-secondary bx bx-envelope font-medium-1"></i></a></td>
            </tr>
            <tr>
              <td class="text-bold-500">Morgan Vanblum</td>
              <td>$13/hr</td>
              <td class="text-bold-500">Graphic concepts</td>
              <td>Remote</td>
              <td>Shangai,China</td>
              <td><a href="javascript:void(0);"><i
                    class="badge-circle badge-circle-light-secondary bx bx-envelope font-medium-1"></i></a></td>
            </tr>
            <tr>
              <td class="text-bold-500">Tiffani Blogz</td>
              <td>$15/hr</td>
              <td class="text-bold-500">Animation</td>
              <td>Remote</td>
              <td>Austin,Texas</td>
              <td><a href="javascript:void(0);"><i
                    class="badge-circle badge-circle-light-secondary bx bx-envelope font-medium-1"></i></a></td>
            </tr>
            <tr>
              <td class="text-bold-500">Ashley Boul</td>
              <td>$15/hr</td>
              <td class="text-bold-500">Animation</td>
              <td>Remote</td>
              <td>Austin,Texas</td>
              <td><a href="javascript:void(0);"><i
                    class="badge-circle badge-circle-light-secondary bx bx-envelope font-medium-1"></i></a></td>
            </tr>
            <tr>
              <td class="text-bold-500">Mikkey Mice</td>
              <td>$15/hr</td>
              <td class="text-bold-500">Animation</td>
              <td>Remote</td>
              <td>Austin,Texas</td>
              <td><a href="javascript:void(0);"><i
                    class="badge-circle badge-circle-light-secondary bx bx-envelope font-medium-1"></i></a></td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>
<!-- Striped rows end -->

<!-- Striped rows with inverse dark table start -->
<div class="row" id="table-striped-dark">
  <div class="col-12">
    <div class="card">
      <div class="card-header">
        <h4 class="card-title">Striped inverse dark</h4>
      </div>
      <div class="card-body">
        <p class="card-text">Use <code>.table-dark</code> with <code>.table-striped</code> to add zebra-striping to
          any inverse table row within the <code>&lt;tbody&gt;</code>. This styling doesn't work in IE8 and below as
          <code>:nth-child</code> CSS selector isn't supported.</p>
      </div>
      <!-- table strip dark -->
      <div class="table-responsive">
        <table class="table table-striped table-dark mb-0">
          <thead>
            <tr>
              <th>NAME</th>
              <th>RATE</th>
              <th>SKILL</th>
              <th>TYPE</th>
              <th>LOCATION</th>
              <th>ACTION</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td class="text-bold-500">Michael Right</td>
              <td>$15/hr</td>
              <td class="text-bold-500">UI/UX</td>
              <td>Remote</td>
              <td>Austin,Taxes</td>
              <td><a href="javascript:void(0);"><i class="badge-circle bx bx-envelope font-medium-1"></i></a></td>
            </tr>
            <tr>
              <td class="text-bold-500">Morgan Vanblum</td>
              <td>$13/hr</td>
              <td class="text-bold-500">Graphic concepts</td>
              <td>Remote</td>
              <td>Shangai,China</td>
              <td><a href="javascript:void(0);"><i class="badge-circle bx bx-envelope font-medium-1"></i></a></td>
            </tr>
            <tr>
              <td class="text-bold-500">Tiffani Blogz</td>
              <td>$15/hr</td>
              <td class="text-bold-500">Animation</td>
              <td>Remote</td>
              <td>Austin,Texas</td>
              <td><a href="javascript:void(0);"><i class="badge-circle bx bx-envelope font-medium-1"></i></a></td>
            </tr>
            <tr>
              <td class="text-bold-500">Ashley Boul</td>
              <td>$15/hr</td>
              <td class="text-bold-500">Animation</td>
              <td>Remote</td>
              <td>Austin,Texas</td>
              <td><a href="javascript:void(0);"><i class="badge-circle bx bx-envelope font-medium-1"></i></a></td>
            </tr>
            <tr>
              <td class="text-bold-500">Mikkey Mice</td>
              <td>$15/hr</td>
              <td class="text-bold-500">Animation</td>
              <td>Remote</td>
              <td>Austin,Texas</td>
              <td><a href="javascript:void(0);"><i class="badge-circle bx bx-envelope font-medium-1"></i></a></td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>
<!-- Striped rows with inverse dark table end -->

<!-- Bordered table start -->
<div class="row" id="table-bordered">
  <div class="col-12">
    <div class="card">
      <div class="card-header">
        <h4 class="card-title">Bordered table</h4>
      </div>
      <div class="card-body">
        <p class="card-text">Add <code>.table-bordered</code> for borders on all sides of the table and cells. For
          Inverse Dark Table, add <code>.table-dark</code> along with <code>.table-bordered</code>.</p>
      </div>
      <!-- table bordered -->
      <div class="table-responsive">
        <table class="table table-bordered mb-0">
          <thead>
            <tr>
              <th>NAME</th>
              <th>RATE</th>
              <th>SKILL</th>
              <th>TYPE</th>
              <th>LOCATION</th>
              <th>ACTION</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td class="text-bold-500">Michael Right</td>
              <td>$15/hr</td>
              <td class="text-bold-500">UI/UX</td>
              <td>Remote</td>
              <td>Austin,Taxes</td>
              <td><a href="javascript:void(0);"><i
                    class="badge-circle badge-circle-light-secondary bx bx-envelope font-medium-1"></i></a></td>
            </tr>
            <tr>
              <td class="text-bold-500">Morgan Vanblum</td>
              <td>$13/hr</td>
              <td class="text-bold-500">Graphic concepts</td>
              <td>Remote</td>
              <td>Shangai,China</td>
              <td><a href="javascript:void(0);"><i
                    class="badge-circle badge-circle-light-secondary bx bx-envelope font-medium-1"></i></a></td>
            </tr>
            <tr>
              <td class="text-bold-500">Tiffani Blogz</td>
              <td>$15/hr</td>
              <td class="text-bold-500">Animation</td>
              <td>Remote</td>
              <td>Austin,Texas</td>
              <td><a href="javascript:void(0);"><i
                    class="badge-circle badge-circle-light-secondary bx bx-envelope font-medium-1"></i></a></td>
            </tr>
            <tr>
              <td class="text-bold-500">Ashley Boul</td>
              <td>$15/hr</td>
              <td class="text-bold-500">Animation</td>
              <td>Remote</td>
              <td>Austin,Texas</td>
              <td><a href="javascript:void(0);"><i
                    class="badge-circle badge-circle-light-secondary bx bx-envelope font-medium-1"></i></a></td>
            </tr>
            <tr>
              <td class="text-bold-500">Mikkey Mice</td>
              <td>$15/hr</td>
              <td class="text-bold-500">Animation</td>
              <td>Remote</td>
              <td>Austin,Texas</td>
              <td><a href="javascript:void(0);"><i
                    class="badge-circle badge-circle-light-secondary bx bx-envelope font-medium-1"></i></a></td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>
<!-- Bordered table end -->

<!-- Borderless table start -->
<div class="row" id="table-borderless">
  <div class="col-12">
    <div class="card">
      <div class="card-header">
        <h4 class="card-title">Borderless Table</h4>
      </div>
      <div class="card-body">
        <p class="card-text">Add <code>.table-borderless</code> for a table without borders. It can also be used on
          dark tables.</p>
      </div>
      <!-- table with no border -->
      <div class="table-responsive">
        <table class="table table-borderless mb-0">
          <thead>
            <tr>
              <th>NAME</th>
              <th>RATE</th>
              <th>SKILL</th>
              <th>TYPE</th>
              <th>LOCATION</th>
              <th>ACTION</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td class="text-bold-500">Michael Right</td>
              <td>$15/hr</td>
              <td class="text-bold-500">UI/UX</td>
              <td>Remote</td>
              <td>Austin,Taxes</td>
              <td><a href="javascript:void(0);"><i
                    class="badge-circle badge-circle-light-secondary bx bx-envelope font-medium-1"></i></a></td>
            </tr>
            <tr>
              <td class="text-bold-500">Morgan Vanblum</td>
              <td>$13/hr</td>
              <td class="text-bold-500">Graphic concepts</td>
              <td>Remote</td>
              <td>Shangai,China</td>
              <td><a href="javascript:void(0);"><i
                    class="badge-circle badge-circle-light-secondary bx bx-envelope font-medium-1"></i></a></td>
            </tr>
            <tr>
              <td class="text-bold-500">Tiffani Blogz</td>
              <td>$15/hr</td>
              <td class="text-bold-500">Animation</td>
              <td>Remote</td>
              <td>Austin,Texas</td>
              <td><a href="javascript:void(0);"><i
                    class="badge-circle badge-circle-light-secondary bx bx-envelope font-medium-1"></i></a></td>
            </tr>
            <tr>
              <td class="text-bold-500">Ashley Boul</td>
              <td>$15/hr</td>
              <td class="text-bold-500">Animation</td>
              <td>Remote</td>
              <td>Austin,Texas</td>
              <td><a href="javascript:void(0);"><i
                    class="badge-circle badge-circle-light-secondary bx bx-envelope font-medium-1"></i></a></td>
            </tr>
            <tr>
              <td class="text-bold-500">Mikkey Mice</td>
              <td>$15/hr</td>
              <td class="text-bold-500">Animation</td>
              <td>Remote</td>
              <td>Austin,Texas</td>
              <td><a href="javascript:void(0);"><i
                    class="badge-circle badge-circle-light-secondary bx bx-envelope font-medium-1"></i></a></td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>
<!-- Borderless table end -->

<!-- Hoverable rows start -->
<div class="row" id="table-hover-row">
  <div class="col-12">
    <div class="card">
      <div class="card-header">
        <h4 class="card-title">Hoverable rows</h4>
      </div>
      <div class="card-body">
        <p>Add <code class="highlighter-rouge">.table-hover</code> to enable a hover state on table rows within a
          <code class="highlighter-rouge">&lt;tbody&gt;</code>.</p>
      </div>
      <!-- table hover -->
      <div class="table-responsive">
        <table class="table table-hover mb-0">
          <thead>
            <tr>
              <th>NAME</th>
              <th>RATE</th>
              <th>SKILL</th>
              <th>TYPE</th>
              <th>LOCATION</th>
              <th>ACTION</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td class="text-bold-500">Michael Right</td>
              <td>$15/hr</td>
              <td class="text-bold-500">UI/UX</td>
              <td>Remote</td>
              <td>Austin,Taxes</td>
              <td><a href="javascript:void(0);"><i
                    class="badge-circle badge-circle-light-secondary bx bx-envelope font-medium-1"></i></a></td>
            </tr>
            <tr>
              <td class="text-bold-500">Morgan Vanblum</td>
              <td>$13/hr</td>
              <td class="text-bold-500">Graphic concepts</td>
              <td>Remote</td>
              <td>Shangai,China</td>
              <td><a href="javascript:void(0);"><i
                    class="badge-circle badge-circle-light-secondary bx bx-envelope font-medium-1"></i></a></td>
            </tr>
            <tr>
              <td class="text-bold-500">Tiffani Blogz</td>
              <td>$15/hr</td>
              <td class="text-bold-500">Animation</td>
              <td>Remote</td>
              <td>Austin,Texas</td>
              <td><a href="javascript:void(0);"><i
                    class="badge-circle badge-circle-light-secondary bx bx-envelope font-medium-1"></i></a></td>
            </tr>
            <tr>
              <td class="text-bold-500">Ashley Boul</td>
              <td>$15/hr</td>
              <td class="text-bold-500">Animation</td>
              <td>Remote</td>
              <td>Austin,Texas</td>
              <td><a href="javascript:void(0);"><i
                    class="badge-circle badge-circle-light-secondary bx bx-envelope font-medium-1"></i></a></td>
            </tr>
            <tr>
              <td class="text-bold-500">Mikkey Mice</td>
              <td>$15/hr</td>
              <td class="text-bold-500">Animation</td>
              <td>Remote</td>
              <td>Austin,Texas</td>
              <td><a href="javascript:void(0);"><i
                    class="badge-circle badge-circle-light-secondary bx bx-envelope font-medium-1"></i></a></td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>
<!-- Hoverable rows end -->

<!-- Contextual classes start -->
<div class="row" id="table-contexual">
  <div class="col-12">
    <div class="card">
      <div class="card-header">
        <h4 class="card-title">Contextual classes</h4>
      </div>
      <div class="card-body">
        <p>Use contextual classes to color table rows or individual cells. Read full documnetation <a
            href="https://getbootstrap.com/docs/4.3/content/tables/#contextual-classes" target="_blank">here.</a></p>
      </div>
      <!-- table contextual / colored -->
      <div class="table-responsive">
        <table class="table mb-0">
          <thead>
            <tr>
              <th>NAME</th>
              <th>RATE</th>
              <th>SKILL</th>
              <th>TYPE</th>
              <th>LOCATION</th>
              <th>ACTION</th>
            </tr>
          </thead>
          <tbody>
            <tr class="table-active">
              <td class="text-bold-500">Michael Right</td>
              <td>$15/hr</td>
              <td class="text-bold-500">UI/UX</td>
              <td>Remote</td>
              <td>Austin,Taxes</td>
              <td><a href="javascript:void(0);"><i
                    class="badge-circle badge-circle-light-secondary bx bx-envelope font-medium-1"></i></a></td>
            </tr>
            <tr class="table-primary">
              <td class="text-bold-500">Morgan Vanblum</td>
              <td>$13/hr</td>
              <td class="text-bold-500">Graphic concepts</td>
              <td>Remote</td>
              <td>Shangai,China</td>
              <td><a href="javascript:void(0);"><i
                    class="badge-circle badge-circle-light-secondary bx bx-envelope font-medium-1"></i></a></td>
            </tr>
            <tr class="table-secondary">
              <td class="text-bold-500">Tiffani Blogz</td>
              <td>$15/hr</td>
              <td class="text-bold-500">Animation</td>
              <td>Remote</td>
              <td>Austin,Texas</td>
              <td><a href="javascript:void(0);"><i
                    class="badge-circle badge-circle-light-secondary bx bx-envelope font-medium-1"></i></a></td>
            </tr>
            <tr class="table-success">
              <td class="text-bold-500">Ashley Boul</td>
              <td>$15/hr</td>
              <td class="text-bold-500">Animation</td>
              <td>Remote</td>
              <td>Austin,Texas</td>
              <td><a href="javascript:void(0);"><i
                    class="badge-circle badge-circle-light-secondary bx bx-envelope font-medium-1"></i></a></td>
            </tr>
            <tr class="table-danger">
              <td class="text-bold-500">Mikkey Mice</td>
              <td>$15/hr</td>
              <td class="text-bold-500">Animation</td>
              <td>Remote</td>
              <td>Austin,Texas</td>
              <td><a href="javascript:void(0);"><i
                    class="badge-circle badge-circle-light-secondary bx bx-envelope font-medium-1"></i></a></td>
            </tr>
            <tr class="table-warning">
              <td class="text-bold-500">Mikkey Mice</td>
              <td>$15/hr</td>
              <td class="text-bold-500">Animation</td>
              <td>Remote</td>
              <td>Austin,Texas</td>
              <td><a href="javascript:void(0);"><i
                    class="badge-circle badge-circle-light-secondary bx bx-envelope font-medium-1"></i></a></td>
            </tr>
            <tr class="table-info">
              <td class="text-bold-500">Mikkey Mice</td>
              <td>$15/hr</td>
              <td class="text-bold-500">Animation</td>
              <td>Remote</td>
              <td>Austin,Texas</td>
              <td><a href="javascript:void(0);"><i
                    class="badge-circle badge-circle-light-secondary bx bx-envelope font-medium-1"></i></a></td>
            </tr>
            <tr class="table-light">
              <td class="text-bold-500">Mikkey Mice</td>
              <td>$15/hr</td>
              <td class="text-bold-500">Animation</td>
              <td>Remote</td>
              <td>Austin,Texas</td>
              <td><a href="javascript:void(0);"><i
                    class="badge-circle badge-circle-light-secondary bx bx-envelope font-medium-1"></i></a></td>
            </tr>
            <tr class="table-dark">
              <td class="text-bold-500">Mikkey Mice</td>
              <td>$15/hr</td>
              <td class="text-bold-500">Animation</td>
              <td>Remote</td>
              <td>Austin,Texas</td>
              <td><a href="javascript:void(0);"><i
                    class="badge-circle badge-circle-light-secondary bx bx-envelope font-medium-1"></i></a></td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>
<!-- Contextual classes end -->

<!-- Responsive tables start -->
<div class="row" id="table-responsive">
  <div class="col-12">
    <div class="card">
      <div class="card-header">
        <h4 class="card-title">Responsive tables</h4>
      </div>
      <div class="card-body">
        <p>Responsive tables allow tables to be scrolled horizontally with ease. Make any table responsive across all
          viewports by adding <code class="highlighter-rouge">.table-responsive</code> class on <code
            class="highlighter-rouge">.table</code>. Or, pick a maximum breakpoint with which to have a responsive
          table up to by adding <code class="highlighter-rouge"> .table-responsive{-sm|-md|-lg|-xl}</code>. Read full
          documnetation <a href="https://getbootstrap.com/docs/4.3/content/tables/#responsive-tables"
            target="_blank">here.</a></p>
        <div class="alert bg-rgba-primary mt-1 p-1">
          <h4 class="text-primary">Vertical clipping/truncation</h4>
          <p class="m-0">Responsive tables make use of <code class="highlighter-rouge">overflow-y: hidden</code>,
            which clips off
            any content that goes beyond the bottom or top edges of the table. In particular, this can clip off
            dropdown menus and other third-party widgets.</p>
        </div>
        <h5 class="card-title mt-2">Always responsive</h5>
      </div>
      <!-- table responsive -->
      <table class="table table-responsive mb-0">
        <thead>
          <tr>
            <th scope="col">#</th>
            <th scope="col">Heading 1</th>
            <th scope="col">Heading 2</th>
            <th scope="col">Heading 3</th>
            <th scope="col">Heading 4</th>
            <th scope="col">Heading 5</th>
            <th scope="col">Heading 6</th>
            <th scope="col">Heading 7</th>
            <th scope="col">Heading 8</th>
            <th scope="col">Heading 9</th>
            <th scope="col">Heading 10</th>
            <th scope="col">Heading 11</th>
            <th scope="col">Heading 12</th>
            <th scope="col">Heading 13</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Michael Right</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
          </tr>
          <tr>
            <td>Michael Right</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
          </tr>
          <tr>
            <td>Michael Right</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>
<!-- Responsive tables end -->

@endsection