Bootstrap Tables

Discover 24 Bootstrap Tables available in Loopple

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

Table Authors

Component from Argon Dashboard Builder

Table Watchlist

Component from Argon Dashboard Builder

Table Projects

Component from Asteria Dashboard Builder
<div class="card mb-4 draggable">
  <div class="card-header pb-0">
    <div class="row">
      <div class="col-lg-6 col-7">
        <h6>Projects</h6>
      </div>
      <div class="col-lg-6 col-5 my-auto text-end">
        <div class="dropdown float-lg-end pe-2">
          <a class="cursor-pointer" id="dropdownTable" data-bs-toggle="dropdown" aria-expanded="false">
            <i class="fa fa-ellipsis-v text-secondary"></i>
          </a>
          <ul class="dropdown-menu py-2 ms-sm-n4 ms-n5" aria-labelledby="dropdownTable">
            <li><a class="dropdown-item" href="javascript:;"><i class="fa fa-download me-3"></i>Download</a></li>
            <li><a class="dropdown-item" href="javascript:;"><i class="fa fa-print me-3"></i>Print</a></li>
            <li><a class="dropdown-item" href="javascript:;"><i class="fa fa-archive me-3"></i>Archive</a></li>
            <hr class="my-2">
            <li><a class="dropdown-item text-danger" href="javascript:;"><i class="fa fa-trash me-3"></i>Delete</a></li>
          </ul>
        </div>
      </div>
    </div>
  </div>
  <div class="card-body px-0 py-2">
    <div class="table-responsive">
      <table class="table align-items-center mb-0">
        <thead>
          <tr>
            <th class="text-secondary text-sm font-weight-bold opacity-8">Companies</th>
            <th class="text-secondary text-sm font-weight-bold opacity-8 ps-2">Members</th>
            <th class="text-center text-secondary text-sm font-weight-bold opacity-8">Budget</th>
            <th class="text-center text-secondary text-sm font-weight-bold opacity-8">Completion</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td class="ps-4">
              <h6 class="mb-0 text-sm">Loopple</h6>
            </td>
            <td>
              <div class="avatar-group mt-2">
                <a href="javascript:;" class="avatar avatar-xs rounded-circle" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Ryan Tompson">
                  <img src="https://images.unsplash.com/photo-1570295999919-56ceb5ecca61?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8NXx8cG9ydHJhaXR8ZW58MHwyfDB8fA%3D%3D&auto=format&fit=crop&w=800&q=60" alt="team1">
                </a>
                <a href="javascript:;" class="avatar avatar-xs rounded-circle" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Romina Hadid">
                  <img src="https://images.unsplash.com/photo-1485893086445-ed75865251e0?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTF8fHBvcnRyYWl0fGVufDB8MnwwfHw%3D&auto=format&fit=crop&w=800&q=60" alt="team2">
                </a>
                <a href="javascript:;" class="avatar avatar-xs rounded-circle" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Alexander Smith">
                  <img src="https://images.unsplash.com/photo-1529068755536-a5ade0dcb4e8?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8OTR8fHBvcnRyYWl0fGVufDB8MnwwfHw%3D&auto=format&fit=crop&w=800&q=60" alt="team3">
                </a>
                <a href="javascript:;" class="avatar avatar-xs rounded-circle" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Jessica Doe">
                  <img src="https://images.unsplash.com/photo-1595152772835-219674b2a8a6?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTA3fHxwb3J0cmFpdHxlbnwwfDJ8MHx8&auto=format&fit=crop&w=800&q=60" alt="team4">
                </a>
              </div>
            </td>
            <td class="align-middle text-center text-sm">
              <span class="text-xs font-weight-bold"> $14,000 </span>
            </td>
            <td class="align-middle">
              <div class="progress-wrapper w-75 mx-auto">
                <div class="progress-info">
                  <div class="progress-percentage">
                    <span class="text-xs font-weight-bold">60%</span>
                  </div>
                </div>
                <div class="progress">
                  <div class="progress-bar bg-gradient-info w-60" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div>
                </div>
              </div>
            </td>
          </tr>
          <tr>
            <td class="ps-4">
              <h6 class="mb-0 text-sm">Facebook</h6>
            </td>
            <td>
              <div class="avatar-group mt-2">
                <a href="javascript:;" class="avatar avatar-xs rounded-circle" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Romina Hadid">
                  <img src="https://images.unsplash.com/photo-1485893086445-ed75865251e0?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTF8fHBvcnRyYWl0fGVufDB8MnwwfHw%3D&auto=format&fit=crop&w=800&q=60" alt="team5">
                </a>
                <a href="javascript:;" class="avatar avatar-xs rounded-circle" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Jessica Doe">
                  <img src="https://images.unsplash.com/photo-1595152772835-219674b2a8a6?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTA3fHxwb3J0cmFpdHxlbnwwfDJ8MHx8&auto=format&fit=crop&w=800&q=60" alt="team6">
                </a>
              </div>
            </td>
            <td class="align-middle text-center text-sm">
              <span class="text-xs font-weight-bold"> $3,000 </span>
            </td>
            <td class="align-middle">
              <div class="progress-wrapper w-75 mx-auto">
                <div class="progress-info">
                  <div class="progress-percentage">
                    <span class="text-xs font-weight-bold">10%</span>
                  </div>
                </div>
                <div class="progress">
                  <div class="progress-bar bg-gradient-info w-10" role="progressbar" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
                </div>
              </div>
            </td>
          </tr>
          <tr>
            <td class="ps-4">
              <h6 class="mb-0 text-sm">Creative Tim</h6>
            </td>
            <td>
              <div class="avatar-group mt-2">
                <a href="javascript:;" class="avatar avatar-xs rounded-circle" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Romina Hadid">
                  <img src="https://images.unsplash.com/photo-1529068755536-a5ade0dcb4e8?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8OTR8fHBvcnRyYWl0fGVufDB8MnwwfHw%3D&auto=format&fit=crop&w=800&q=60" alt="team8">
                </a>
                <a href="javascript:;" class="avatar avatar-xs rounded-circle" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Jessica Doe">
                  <img src="https://images.unsplash.com/photo-1570295999919-56ceb5ecca61?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8NXx8cG9ydHJhaXR8ZW58MHwyfDB8fA%3D%3D&auto=format&fit=crop&w=800&q=60" alt="team9">
                </a>
              </div>
            </td>
            <td class="align-middle text-center text-sm">
              <span class="text-xs font-weight-bold"> Not set </span>
            </td>
            <td class="align-middle">
              <div class="progress-wrapper w-75 mx-auto">
                <div class="progress-info">
                  <div class="progress-percentage">
                    <span class="text-xs font-weight-bold">100%</span>
                  </div>
                </div>
                <div class="progress">
                  <div class="progress-bar bg-gradient-success w-100" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
                </div>
              </div>
            </td>
          </tr>
          <tr>
            <td class="ps-4">
              <h6 class="mb-0 text-sm">Shopify</h6>
            </td>
            <td>
              <div class="avatar-group mt-2">
                <a href="javascript:;" class="avatar avatar-xs rounded-circle" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Ryan Tompson">
                  <img src="https://images.unsplash.com/photo-1595152772835-219674b2a8a6?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTA3fHxwb3J0cmFpdHxlbnwwfDJ8MHx8&auto=format&fit=crop&w=800&q=60" alt="user1">
                </a>
                <a href="javascript:;" class="avatar avatar-xs rounded-circle" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Romina Hadid">
                  <img src="https://images.unsplash.com/photo-1529068755536-a5ade0dcb4e8?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8OTR8fHBvcnRyYWl0fGVufDB8MnwwfHw%3D&auto=format&fit=crop&w=800&q=60" alt="user2">
                </a>
                <a href="javascript:;" class="avatar avatar-xs rounded-circle" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Alexander Smith">
                  <img src="https://images.unsplash.com/photo-1595152772835-219674b2a8a6?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTA3fHxwb3J0cmFpdHxlbnwwfDJ8MHx8&auto=format&fit=crop&w=800&q=60" alt="user3">
                </a>
                <a href="javascript:;" class="avatar avatar-xs rounded-circle" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Jessica Doe">
                  <img src="https://images.unsplash.com/photo-1570295999919-56ceb5ecca61?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8NXx8cG9ydHJhaXR8ZW58MHwyfDB8fA%3D%3D&auto=format&fit=crop&w=800&q=60" alt="user4">
                </a>
              </div>
            </td>
            <td class="align-middle text-center text-sm">
              <span class="text-xs font-weight-bold"> $20,500 </span>
            </td>
            <td class="align-middle">
              <div class="progress-wrapper w-75 mx-auto">
                <div class="progress-info">
                  <div class="progress-percentage">
                    <span class="text-xs font-weight-bold">100%</span>
                  </div>
                </div>
                <div class="progress">
                  <div class="progress-bar bg-gradient-success w-100" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
                </div>
              </div>
            </td>
          </tr>
          <tr>
            <td class="ps-4">
              <h6 class="mb-0 text-sm">Asana</h6>
            </td>
            <td>
              <div class="avatar-group mt-2">
                <a href="javascript:;" class="avatar avatar-xs rounded-circle" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Ryan Tompson">
                  <img src="https://images.unsplash.com/photo-1595152772835-219674b2a8a6?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTA3fHxwb3J0cmFpdHxlbnwwfDJ8MHx8&auto=format&fit=crop&w=800&q=60" alt="user5">
                </a>
              </div>
            </td>
            <td class="align-middle text-center text-sm">
              <span class="text-xs font-weight-bold"> $500 </span>
            </td>
            <td class="align-middle">
              <div class="progress-wrapper w-75 mx-auto">
                <div class="progress-info">
                  <div class="progress-percentage">
                    <span class="text-xs font-weight-bold">25%</span>
                  </div>
                </div>
                <div class="progress">
                  <div class="progress-bar bg-gradient-info w-25" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="25"></div>
                </div>
              </div>
            </td>
          </tr>
          <tr>
            <td class="ps-4">
              <h6 class="mb-0 text-sm">Invision</h6>
            </td>
            <td>
              <div class="avatar-group mt-2">
                <a href="javascript:;" class="avatar avatar-xs rounded-circle" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Ryan Tompson">
                  <img src="https://images.unsplash.com/photo-1570295999919-56ceb5ecca61?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8NXx8cG9ydHJhaXR8ZW58MHwyfDB8fA%3D%3D&auto=format&fit=crop&w=800&q=60" alt="user6">
                </a>
                <a href="javascript:;" class="avatar avatar-xs rounded-circle" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Jessica Doe">
                  <img src="https://images.unsplash.com/photo-1595152772835-219674b2a8a6?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTA3fHxwb3J0cmFpdHxlbnwwfDJ8MHx8&auto=format&fit=crop&w=800&q=60" alt="user7">
                </a>
              </div>
            </td>
            <td class="align-middle text-center text-sm">
              <span class="text-xs font-weight-bold"> $2,000 </span>
            </td>
            <td class="align-middle">
              <div class="progress-wrapper w-75 mx-auto">
                <div class="progress-info">
                  <div class="progress-percentage">
                    <span class="text-xs font-weight-bold">40%</span>
                  </div>
                </div>
                <div class="progress">
                  <div class="progress-bar bg-gradient-info w-40" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="40"></div>
                </div>
              </div>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

Table Watchlist

Component from Asteria Dashboard Builder