Bootstrap Tables

Discover 24 Bootstrap Tables available in Loopple

Table Artists

Component from Soft UI Dashboard Builder

Table Products

Component from Soft UI Dashboard Builder

Table Visits

Component from Argon Dashboard Builder
<div class="card draggable">
  <div class="card-header border-0">
    <div class="row align-items-center">
      <div class="col">
        <h3 class="mb-0">Page visits</h3>
      </div>
      <div class="col text-right">
        <a href="#!" class="btn btn-sm btn-primary">See all</a>
      </div>
    </div>
  </div>
  <div class="table-responsive">
    <table class="table align-items-center table-flush">
      <thead class="thead-light">
        <tr>
          <th scope="col">Page name</th>
          <th scope="col">Visitors</th>
          <th scope="col">Unique users</th>
          <th scope="col">Bounce rate</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th scope="row">
            /argon/
          </th>
          <td>
            4,569
          </td>
          <td>
            340
          </td>
          <td>
            <i class="fas fa-arrow-up text-success mr-3"></i> 46,53%
          </td>
        </tr>
        <tr>
          <th scope="row">
            /argon/index.html
          </th>
          <td>
            3,985
          </td>
          <td>
            319
          </td>
          <td>
            <i class="fas fa-arrow-down text-warning mr-3"></i> 46,53%
          </td>
        </tr>
        <tr>
          <th scope="row">
            /argon/charts.html
          </th>
          <td>
            3,513
          </td>
          <td>
            294
          </td>
          <td>
            <i class="fas fa-arrow-down text-warning mr-3"></i> 36,49%
          </td>
        </tr>
        <tr>
          <th scope="row">
            /argon/tables.html
          </th>
          <td>
            2,050
          </td>
          <td>
            147
          </td>
          <td>
            <i class="fas fa-arrow-up text-success mr-3"></i> 50,87%
          </td>
        </tr>
        <tr>
          <th scope="row">
            /argon/profile.html
          </th>
          <td>
            1,795
          </td>
          <td>
            190
          </td>
          <td>
            <i class="fas fa-arrow-down text-danger mr-3"></i> 46,53%
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

Table Dark

Component from Argon Dashboard Builder
<div class="card bg-default shadow draggable">
  <div class="card-header bg-transparent border-0">
    <h3 class="text-white mb-0">Dark table</h3>
  </div>
  <div class="table-responsive">
    <table class="table align-items-center table-dark table-flush">
      <thead class="thead-dark">
        <tr>
          <th scope="col" class="sort" data-sort="name">Project</th>
          <th scope="col" class="sort" data-sort="budget">Budget</th>
          <th scope="col" class="sort" data-sort="status">Status</th>
          <th scope="col">Users</th>
          <th scope="col" class="sort" data-sort="completion">Completion</th>
          <th scope="col"></th>
        </tr>
      </thead>
      <tbody class="list">
        <tr>
          <th scope="row">
            <div class="media align-items-center">
              <a href="#" class="avatar rounded-circle mr-3">
                <img alt="Image placeholder" src="https://demos.creative-tim.com/argon-dashboard/assets-old/img/theme/bootstrap.jpg">
              </a>
              <div class="media-body">
                <span class="name mb-0 text-sm">Argon Design System</span>
              </div>
            </div>
          </th>
          <td class="budget">
            $2500 USD
          </td>
          <td>
            <span class="badge badge-dot mr-4">
              <i class="bg-warning"></i>
              <span class="status">pending</span>
            </span>
          </td>
          <td>
            <div class="avatar-group">
              <a href="#" class="avatar avatar-sm rounded-circle" data-toggle="tooltip" data-original-title="Ryan Tompson">
                <img alt="Image placeholder" src="https://demos.creative-tim.com/argon-dashboard/assets-old/img/theme/team-1.jpg">
              </a>
              <a href="#" class="avatar avatar-sm rounded-circle" data-toggle="tooltip" data-original-title="Romina Hadid">
                <img alt="Image placeholder" src="https://demos.creative-tim.com/argon-dashboard/assets-old/img/theme/team-2.jpg">
              </a>
              <a href="#" class="avatar avatar-sm rounded-circle" data-toggle="tooltip" data-original-title="Alexander Smith">
                <img alt="Image placeholder" src="https://demos.creative-tim.com/argon-dashboard/assets-old/img/theme/team-3.jpg">
              </a>
              <a href="#" class="avatar avatar-sm rounded-circle" data-toggle="tooltip" data-original-title="Jessica Doe">
                <img alt="Image placeholder" src="https://demos.creative-tim.com/argon-dashboard/assets-old/img/theme/team-4.jpg">
              </a>
            </div>
          </td>
          <td>
            <div class="d-flex align-items-center">
              <span class="completion mr-2">60%</span>
              <div>
                <div class="progress">
                  <div class="progress-bar bg-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"></div>
                </div>
              </div>
            </div>
          </td>
          <td class="text-right">
            <div class="dropdown">
              <a class="btn btn-sm btn-icon-only text-light" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                <i class="fas fa-ellipsis-v"></i>
              </a>
              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
                <a class="dropdown-item" href="#">Action</a>
                <a class="dropdown-item" href="#">Another action</a>
                <a class="dropdown-item" href="#">Something else here</a>
              </div>
            </div>
          </td>
        </tr>
        <tr>
          <th scope="row">
            <div class="media align-items-center">
              <a href="#" class="avatar rounded-circle mr-3">
                <img alt="Image placeholder" src="https://demos.creative-tim.com/argon-dashboard/assets-old/img/theme/angular.jpg">
              </a>
              <div class="media-body">
                <span class="name mb-0 text-sm">Angular Now UI Kit PRO</span>
              </div>
            </div>
          </th>
          <td class="budget">
            $1800 USD
          </td>
          <td>
            <span class="badge badge-dot mr-4">
              <i class="bg-success"></i>
              <span class="status">completed</span>
            </span>
          </td>
          <td>
            <div class="avatar-group">
              <a href="#" class="avatar avatar-sm rounded-circle" data-toggle="tooltip" data-original-title="Ryan Tompson">
                <img alt="Image placeholder" src="https://demos.creative-tim.com/argon-dashboard/assets-old/img/theme/team-1.jpg">
              </a>
              <a href="#" class="avatar avatar-sm rounded-circle" data-toggle="tooltip" data-original-title="Romina Hadid">
                <img alt="Image placeholder" src="https://demos.creative-tim.com/argon-dashboard/assets-old/img/theme/team-2.jpg">
              </a>
              <a href="#" class="avatar avatar-sm rounded-circle" data-toggle="tooltip" data-original-title="Alexander Smith">
                <img alt="Image placeholder" src="https://demos.creative-tim.com/argon-dashboard/assets-old/img/theme/team-3.jpg">
              </a>
              <a href="#" class="avatar avatar-sm rounded-circle" data-toggle="tooltip" data-original-title="Jessica Doe">
                <img alt="Image placeholder" src="https://demos.creative-tim.com/argon-dashboard/assets-old/img/theme/team-4.jpg">
              </a>
            </div>
          </td>
          <td>
            <div class="d-flex align-items-center">
              <span class="completion mr-2">100%</span>
              <div>
                <div class="progress">
                  <div class="progress-bar bg-success" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%;"></div>
                </div>
              </div>
            </div>
          </td>
          <td class="text-right">
            <div class="dropdown">
              <a class="btn btn-sm btn-icon-only text-light" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                <i class="fas fa-ellipsis-v"></i>
              </a>
              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
                <a class="dropdown-item" href="#">Action</a>
                <a class="dropdown-item" href="#">Another action</a>
                <a class="dropdown-item" href="#">Something else here</a>
              </div>
            </div>
          </td>
        </tr>
        <tr>
          <th scope="row">
            <div class="media align-items-center">
              <a href="#" class="avatar rounded-circle mr-3">
                <img alt="Image placeholder" src="https://demos.creative-tim.com/argon-dashboard/assets-old/img/theme/sketch.jpg">
              </a>
              <div class="media-body">
                <span class="name mb-0 text-sm">Black Dashboard</span>
              </div>
            </div>
          </th>
          <td class="budget">
            $3150 USD
          </td>
          <td>
            <span class="badge badge-dot mr-4">
              <i class="bg-danger"></i>
              <span class="status">delayed</span>
            </span>
          </td>
          <td>
            <div class="avatar-group">
              <a href="#" class="avatar avatar-sm rounded-circle" data-toggle="tooltip" data-original-title="Ryan Tompson">
                <img alt="Image placeholder" src="https://demos.creative-tim.com/argon-dashboard/assets-old/img/theme/team-1.jpg">
              </a>
              <a href="#" class="avatar avatar-sm rounded-circle" data-toggle="tooltip" data-original-title="Romina Hadid">
                <img alt="Image placeholder" src="https://demos.creative-tim.com/argon-dashboard/assets-old/img/theme/team-2.jpg">
              </a>
              <a href="#" class="avatar avatar-sm rounded-circle" data-toggle="tooltip" data-original-title="Alexander Smith">
                <img alt="Image placeholder" src="https://demos.creative-tim.com/argon-dashboard/assets-old/img/theme/team-3.jpg">
              </a>
              <a href="#" class="avatar avatar-sm rounded-circle" data-toggle="tooltip" data-original-title="Jessica Doe">
                <img alt="Image placeholder" src="https://demos.creative-tim.com/argon-dashboard/assets-old/img/theme/team-4.jpg">
              </a>
            </div>
          </td>
          <td>
            <div class="d-flex align-items-center">
              <span class="completion mr-2">72%</span>
              <div>
                <div class="progress">
                  <div class="progress-bar bg-danger" role="progressbar" aria-valuenow="72" aria-valuemin="0" aria-valuemax="100" style="width: 72%;"></div>
                </div>
              </div>
            </div>
          </td>
          <td class="text-right">
            <div class="dropdown">
              <a class="btn btn-sm btn-icon-only text-light" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                <i class="fas fa-ellipsis-v"></i>
              </a>
              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
                <a class="dropdown-item" href="#">Action</a>
                <a class="dropdown-item" href="#">Another action</a>
                <a class="dropdown-item" href="#">Something else here</a>
              </div>
            </div>
          </td>
        </tr>
        <tr>
          <th scope="row">
            <div class="media align-items-center">
              <a href="#" class="avatar rounded-circle mr-3">
                <img alt="Image placeholder" src="https://demos.creative-tim.com/argon-dashboard/assets-old/img/theme/react.jpg">
              </a>
              <div class="media-body">
                <span class="name mb-0 text-sm">React Material Dashboard</span>
              </div>
            </div>
          </th>
          <td class="budget">
            $4400 USD
          </td>
          <td>
            <span class="badge badge-dot mr-4">
              <i class="bg-info"></i>
              <span class="status">on schedule</span>
            </span>
          </td>
          <td>
            <div class="avatar-group">
              <a href="#" class="avatar avatar-sm rounded-circle" data-toggle="tooltip" data-original-title="Ryan Tompson">
                <img alt="Image placeholder" src="https://demos.creative-tim.com/argon-dashboard/assets-old/img/theme/team-1.jpg">
              </a>
              <a href="#" class="avatar avatar-sm rounded-circle" data-toggle="tooltip" data-original-title="Romina Hadid">
                <img alt="Image placeholder" src="https://demos.creative-tim.com/argon-dashboard/assets-old/img/theme/team-2.jpg">
              </a>
              <a href="#" class="avatar avatar-sm rounded-circle" data-toggle="tooltip" data-original-title="Alexander Smith">
                <img alt="Image placeholder" src="https://demos.creative-tim.com/argon-dashboard/assets-old/img/theme/team-3.jpg">
              </a>
              <a href="#" class="avatar avatar-sm rounded-circle" data-toggle="tooltip" data-original-title="Jessica Doe">
                <img alt="Image placeholder" src="https://demos.creative-tim.com/argon-dashboard/assets-old/img/theme/team-4.jpg">
              </a>
            </div>
          </td>
          <td>
            <div class="d-flex align-items-center">
              <span class="completion mr-2">90%</span>
              <div>
                <div class="progress">
                  <div class="progress-bar bg-info" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100" style="width: 90%;"></div>
                </div>
              </div>
            </div>
          </td>
          <td class="text-right">
            <div class="dropdown">
              <a class="btn btn-sm btn-icon-only text-light" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                <i class="fas fa-ellipsis-v"></i>
              </a>
              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
                <a class="dropdown-item" href="#">Action</a>
                <a class="dropdown-item" href="#">Another action</a>
                <a class="dropdown-item" href="#">Something else here</a>
              </div>
            </div>
          </td>
        </tr>
        <tr>
          <th scope="row">
            <div class="media align-items-center">
              <a href="#" class="avatar rounded-circle mr-3">
                <img alt="Image placeholder" src="https://demos.creative-tim.com/argon-dashboard/assets-old/img/theme/vue.jpg">
              </a>
              <div class="media-body">
                <span class="name mb-0 text-sm">Vue Paper UI Kit PRO</span>
              </div>
            </div>
          </th>
          <td class="budget">
            $2200 USD
          </td>
          <td>
            <span class="badge badge-dot mr-4">
              <i class="bg-success"></i>
              <span class="status">completed</span>
            </span>
          </td>
          <td>
            <div class="avatar-group">
              <a href="#" class="avatar avatar-sm rounded-circle" data-toggle="tooltip" data-original-title="Ryan Tompson">
                <img alt="Image placeholder" src="https://demos.creative-tim.com/argon-dashboard/assets-old/img/theme/team-1.jpg">
              </a>
              <a href="#" class="avatar avatar-sm rounded-circle" data-toggle="tooltip" data-original-title="Romina Hadid">
                <img alt="Image placeholder" src="https://demos.creative-tim.com/argon-dashboard/assets-old/img/theme/team-2.jpg">
              </a>
              <a href="#" class="avatar avatar-sm rounded-circle" data-toggle="tooltip" data-original-title="Alexander Smith">
                <img alt="Image placeholder" src="https://demos.creative-tim.com/argon-dashboard/assets-old/img/theme/team-3.jpg">
              </a>
              <a href="#" class="avatar avatar-sm rounded-circle" data-toggle="tooltip" data-original-title="Jessica Doe">
                <img alt="Image placeholder" src="https://demos.creative-tim.com/argon-dashboard/assets-old/img/theme/team-4.jpg">
              </a>
            </div>
          </td>
          <td>
            <div class="d-flex align-items-center">
              <span class="completion mr-2">100%</span>
              <div>
                <div class="progress">
                  <div class="progress-bar bg-success" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%;"></div>
                </div>
              </div>
            </div>
          </td>
          <td class="text-right">
            <div class="dropdown">
              <a class="btn btn-sm btn-icon-only text-light" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                <i class="fas fa-ellipsis-v"></i>
              </a>
              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
                <a class="dropdown-item" href="#">Action</a>
                <a class="dropdown-item" href="#">Another action</a>
                <a class="dropdown-item" href="#">Something else here</a>
              </div>
            </div>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

Table Progress

Component from Argon Dashboard Builder
<div class="card draggable">
    <div class="card-header border-0">
      <div class="row align-items-center">
        <div class="col">
          <h3 class="mb-0">Social traffic</h3>
        </div>
        <div class="col text-right">
          <a href="#!" class="btn btn-sm btn-primary">See all</a>
        </div>
      </div>
    </div>
    <div class="table-responsive">
      <table class="table align-items-center table-flush">
        <thead class="thead-light">
          <tr>
            <th scope="col">Referral</th>
            <th scope="col">Visitors</th>
            <th scope="col"></th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <th scope="row">
              Facebook
            </th>
            <td>
              1,480
            </td>
            <td>
              <div class="d-flex align-items-center">
                <span class="mr-2">60%</span>
                <div>
                  <div class="progress">
                    <div class="progress-bar bg-gradient-danger" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"></div>
                  </div>
                </div>
              </div>
            </td>
          </tr>
          <tr>
            <th scope="row">
              Facebook
            </th>
            <td>
              5,480
            </td>
            <td>
              <div class="d-flex align-items-center">
                <span class="mr-2">70%</span>
                <div>
                  <div class="progress">
                    <div class="progress-bar bg-gradient-success" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width: 70%;"></div>
                  </div>
                </div>
              </div>
            </td>
          </tr>
          <tr>
            <th scope="row">
              Google
            </th>
            <td>
              4,807
            </td>
            <td>
              <div class="d-flex align-items-center">
                <span class="mr-2">80%</span>
                <div>
                  <div class="progress">
                    <div class="progress-bar bg-gradient-primary" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%;"></div>
                  </div>
                </div>
              </div>
            </td>
          </tr>
          <tr>
            <th scope="row">
              Instagram
            </th>
            <td>
              3,678
            </td>
            <td>
              <div class="d-flex align-items-center">
                <span class="mr-2">75%</span>
                <div>
                  <div class="progress">
                    <div class="progress-bar bg-gradient-info" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%;"></div>
                  </div>
                </div>
              </div>
            </td>
          </tr>
          <tr>
            <th scope="row">
              twitter
            </th>
            <td>
              2,645
            </td>
            <td>
              <div class="d-flex align-items-center">
                <span class="mr-2">30%</span>
                <div>
                  <div class="progress">
                    <div class="progress-bar bg-gradient-warning" role="progressbar" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100" style="width: 30%;"></div>
                  </div>
              </div>
              </div>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>

Table Actions

Component from Argon Dashboard Builder

Table Licenses

Component from Argon Dashboard Builder

Table Ecommerce

Component from Argon Dashboard Builder

Table Sell

Component from Argon Dashboard Builder

Table Toggle

Component from Argon Dashboard Builder