Basic Tables
Documentation and examples for opt-in styling of tables with Bootstrap.
Read the official
Bootstrap Documentation for a full list of instructions
and other options.
Basic Table
Due to the widespread use of tables across third-party widgets like badge and avatars, we’ve designed our
tables to be opt-in. Just add the base class .table to any <table>, then
extend with custom styles or our various included modifier classes.
Use table-border-bottom-0 class with <tbody> or <tfoot> to remove border bottom from last <tr>.
| Project | Client | Users | Status | Actions |
|---|---|---|---|---|
| Angular Project | Albert Cook |
|
Active |
|
| React Project | Barry Hunter |
|
Completed |
|
| VueJs Project | Trevor Baker |
|
Scheduled |
|
| Bootstrap Project | Jerry Milton |
|
Pending |
|
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th>Project</th>
<th>Client</th>
<th>Users</th>
<th>Status</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td><i class="fab fa-angular fa-xl text-danger me-4"></i> <span>Angular Project</span></td>
<td>Albert Cook</td>
<td>
<ul class="list-unstyled users-list m-0 avatar-group d-flex align-items-center">
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" class="avatar avatar-xs pull-up" title="Lilian Fuller">
<img src="assets/img/avatars/5.png" alt="Avatar" class="rounded-circle">
</li>
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" class="avatar avatar-xs pull-up" title="Sophia Wilkerson">
<img src="assets/img/avatars/6.png" alt="Avatar" class="rounded-circle">
</li>
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" class="avatar avatar-xs pull-up" title="Christina Parker">
<img src="assets/img/avatars/7.png" alt="Avatar" class="rounded-circle">
</li>
</ul>
</td>
<td><span class="badge bg-label-primary me-1">Active</span></td>
<td>
<div class="dropdown">
<button type="button" class="btn p-0 dropdown-toggle hide-arrow" data-bs-toggle="dropdown"><i class="bx bx-dots-vertical-rounded"></i></button>
<div class="dropdown-menu">
<a class="dropdown-item" href="javascript:void(0);"><i class="bx bx-edit-alt me-1"></i>Edit</a>
<a class="dropdown-item" href="javascript:void(0);"><i class="bx bx-trash me-1"></i>Delete</a>
</div>
</div>
</td>
</tr>
<tr>
<td><i class="fab fa-react fa-xl text-info me-4"></i> <span>React Project</span></td>
<td>Barry Hunter</td>
<td>
<ul class="list-unstyled users-list m-0 avatar-group d-flex align-items-center">
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" class="avatar avatar-xs pull-up" title="Lilian Fuller">
<img src="assets/img/avatars/5.png" alt="Avatar" class="rounded-circle">
</li>
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" class="avatar avatar-xs pull-up" title="Sophia Wilkerson">
<img src="assets/img/avatars/6.png" alt="Avatar" class="rounded-circle">
</li>
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" class="avatar avatar-xs pull-up" title="Christina Parker">
<img src="assets/img/avatars/7.png" alt="Avatar" class="rounded-circle">
</li>
</ul>
</td>
<td><span class="badge bg-label-success me-1">Completed</span></td>
<td>
<div class="dropdown">
<button type="button" class="btn p-0 dropdown-toggle hide-arrow" data-bs-toggle="dropdown"><i class="bx bx-dots-vertical-rounded"></i></button>
<div class="dropdown-menu">
<a class="dropdown-item" href="javascript:void(0);"><i class="bx bx-edit-alt me-2"></i>Edit</a>
<a class="dropdown-item" href="javascript:void(0);"><i class="bx bx-trash me-2"></i>Delete</a>
</div>
</div>
</td>
</tr>
<tr>
<td><i class="fab fa-vuejs fa-xl text-success me-4"></i> <span>VueJs Project</span></td>
<td>Trevor Baker</td>
<td>
<ul class="list-unstyled users-list m-0 avatar-group d-flex align-items-center">
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" class="avatar avatar-xs pull-up" title="Lilian Fuller">
<img src="assets/img/avatars/5.png" alt="Avatar" class="rounded-circle">
</li>
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" class="avatar avatar-xs pull-up" title="Sophia Wilkerson">
<img src="assets/img/avatars/6.png" alt="Avatar" class="rounded-circle">
</li>
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" class="avatar avatar-xs pull-up" title="Christina Parker">
<img src="assets/img/avatars/7.png" alt="Avatar" class="rounded-circle">
</li>
</ul>
</td>
<td><span class="badge bg-label-info me-1">Scheduled</span></td>
<td>
<div class="dropdown">
<button type="button" class="btn p-0 dropdown-toggle hide-arrow" data-bs-toggle="dropdown"><i class="bx bx-dots-vertical-rounded"></i></button>
<div class="dropdown-menu">
<a class="dropdown-item" href="javascript:void(0);"><i class="bx bx-edit-alt me-2"></i>Edit</a>
<a class="dropdown-item" href="javascript:void(0);"><i class="bx bx-trash me-2"></i>Delete</a>
</div>
</div>
</td>
</tr>
<tr>
<td><i class="fab fa-bootstrap fa-xl text-primary me-4"></i> <span>Bootstrap Project</span></td>
<td>Jerry Milton</td>
<td>
<ul class="list-unstyled users-list m-0 avatar-group d-flex align-items-center">
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" class="avatar avatar-xs pull-up" title="Lilian Fuller">
<img src="assets/img/avatars/5.png" alt="Avatar" class="rounded-circle">
</li>
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" class="avatar avatar-xs pull-up" title="Sophia Wilkerson">
<img src="assets/img/avatars/6.png" alt="Avatar" class="rounded-circle">
</li>
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" class="avatar avatar-xs pull-up" title="Christina Parker">
<img src="assets/img/avatars/7.png" alt="Avatar" class="rounded-circle">
</li>
</ul>
</td>
<td><span class="badge bg-label-warning me-1">Pending</span></td>
<td>
<div class="dropdown">
<button type="button" class="btn p-0 dropdown-toggle hide-arrow" data-bs-toggle="dropdown"><i class="bx bx-dots-vertical-rounded"></i></button>
<div class="dropdown-menu">
<a class="dropdown-item" href="javascript:void(0);"><i class="bx bx-edit-alt me-2"></i>Edit</a>
<a class="dropdown-item" href="javascript:void(0);"><i class="bx bx-trash me-2"></i>Delete</a>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>Dark Table
You can also invert the colors—with light text on dark backgrounds—with .table-dark.
| Project | Client | Users | Status | Actions |
|---|---|---|---|---|
| Angular Project | Albert Cook |
|
Active |
|
| React Project | Barry Hunter |
|
Completed |
|
| VueJs Project | Trevor Baker |
|
Scheduled |
|
| Bootstrap Project | Jerry Milton |
|
Pending |
|
<div class="table-responsive">
<table class="table table-dark">
<thead>
<tr>
<th>Project</th>
<th>Client</th>
<th>Users</th>
<th>Status</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td><i class="fab fa-angular fa-xl text-danger me-4"></i> <span>Angular Project</span></td>
<td>Albert Cook</td>
<td>
<ul class="list-unstyled users-list m-0 avatar-group d-flex align-items-center">
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" class="avatar avatar-xs pull-up" title="Lilian Fuller">
<img src="assets/img/avatars/5.png" alt="Avatar" class="rounded-circle">
</li>
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" class="avatar avatar-xs pull-up" title="Sophia Wilkerson">
<img src="assets/img/avatars/6.png" alt="Avatar" class="rounded-circle">
</li>
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" class="avatar avatar-xs pull-up" title="Christina Parker">
<img src="assets/img/avatars/7.png" alt="Avatar" class="rounded-circle">
</li>
</ul>
</td>
<td><span class="badge bg-label-primary me-1">Active</span></td>
<td>
<div class="dropdown">
<button type="button" class="btn p-0 dropdown-toggle hide-arrow" data-bs-toggle="dropdown"><i class="bx bx-dots-vertical-rounded"></i></button>
<div class="dropdown-menu">
<a class="dropdown-item" href="javascript:void(0);"><i class="bx bx-edit-alt me-1"></i>Edit</a>
<a class="dropdown-item" href="javascript:void(0);"><i class="bx bx-trash me-1"></i>Delete</a>
</div>
</div>
</td>
</tr>
<tr>
<td><i class="fab fa-react fa-xl text-info me-4"></i> <span>React Project</span></td>
<td>Barry Hunter</td>
<td>
<ul class="list-unstyled users-list m-0 avatar-group d-flex align-items-center">
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" class="avatar avatar-xs pull-up" title="Lilian Fuller">
<img src="assets/img/avatars/5.png" alt="Avatar" class="rounded-circle">
</li>
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" class="avatar avatar-xs pull-up" title="Sophia Wilkerson">
<img src="assets/img/avatars/6.png" alt="Avatar" class="rounded-circle">
</li>
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" class="avatar avatar-xs pull-up" title="Christina Parker">
<img src="assets/img/avatars/7.png" alt="Avatar" class="rounded-circle">
</li>
</ul>
</td>
<td><span class="badge bg-label-success me-1">Completed</span></td>
<td>
<div class="dropdown">
<button type="button" class="btn p-0 dropdown-toggle hide-arrow" data-bs-toggle="dropdown"><i class="bx bx-dots-vertical-rounded"></i></button>
<div class="dropdown-menu">
<a class="dropdown-item" href="javascript:void(0);"><i class="bx bx-edit-alt me-1"></i>Edit</a>
<a class="dropdown-item" href="javascript:void(0);"><i class="bx bx-trash me-1"></i>Delete</a>
</div>
</div>
</td>
</tr>
<tr>
<td><i class="fab fa-vuejs fa-xl text-success me-4"></i> <span>VueJs Project</span></td>
<td>Trevor Baker</td>
<td>
<ul class="list-unstyled users-list m-0 avatar-group d-flex align-items-center">
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" class="avatar avatar-xs pull-up" title="Lilian Fuller">
<img src="assets/img/avatars/5.png" alt="Avatar" class="rounded-circle">
</li>
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" class="avatar avatar-xs pull-up" title="Sophia Wilkerson">
<img src="assets/img/avatars/6.png" alt="Avatar" class="rounded-circle">
</li>
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" class="avatar avatar-xs pull-up" title="Christina Parker">
<img src="assets/img/avatars/7.png" alt="Avatar" class="rounded-circle">
</li>
</ul>
</td>
<td><span class="badge bg-label-info me-1">Scheduled</span></td>
<td>
<div class="dropdown">
<button type="button" class="btn p-0 dropdown-toggle hide-arrow" data-bs-toggle="dropdown"><i class="bx bx-dots-vertical-rounded"></i></button>
<div class="dropdown-menu">
<a class="dropdown-item" href="javascript:void(0);"><i class="bx bx-edit-alt me-1"></i>Edit</a>
<a class="dropdown-item" href="javascript:void(0);"><i class="bx bx-trash me-1"></i>Delete</a>
</div>
</div>
</td>
</tr>
<tr>
<td><i class="fab fa-bootstrap fa-xl text-primary me-4"></i> <span>Bootstrap Project</span></td>
<td>Jerry Milton</td>
<td>
<ul class="list-unstyled users-list m-0 avatar-group d-flex align-items-center">
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" class="avatar avatar-xs pull-up" title="Lilian Fuller">
<img src="assets/img/avatars/5.png" alt="Avatar" class="rounded-circle">
</li>
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" class="avatar avatar-xs pull-up" title="Sophia Wilkerson">
<img src="assets/img/avatars/6.png" alt="Avatar" class="rounded-circle">
</li>
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" class="avatar avatar-xs pull-up" title="Christina Parker">
<img src="assets/img/avatars/7.png" alt="Avatar" class="rounded-circle">
</li>
</ul>
</td>
<td><span class="badge bg-label-warning me-1">Pending</span></td>
<td>
<div class="dropdown">
<button type="button" class="btn p-0 dropdown-toggle hide-arrow" data-bs-toggle="dropdown"><i class="bx bx-dots-vertical-rounded"></i></button>
<div class="dropdown-menu">
<a class="dropdown-item" href="javascript:void(0);"><i class="bx bx-edit-alt me-1"></i>Edit</a>
<a class="dropdown-item" href="javascript:void(0);"><i class="bx bx-trash me-1"></i>Delete</a>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>Table Head Options
Similar to tables and dark tables, use the modifier classes .table-light or .table-dark to make <thead>s appear light or dark gray.
| Project | Client | Users | Status | Actions |
|---|---|---|---|---|
| Angular Project | Albert Cook |
|
Active |
|
| React Project | Barry Hunter |
|
Completed |
|
| VueJs Project | Trevor Baker |
|
Scheduled |
|
| Bootstrap Project | Jerry Milton |
|
Pending |
|
<div class="table-responsive">
<table class="table">
<thead class="table-dark">
<tr>
<th>Project</th>
<th>Client</th>
<th>Users</th>
<th>Status</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td><i class="fab fa-angular fa-xl text-danger me-4"></i> <span>Angular Project</span></td>
<td>Albert Cook</td>
<td>
<ul class="list-unstyled users-list m-0 avatar-group d-flex align-items-center">
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" class="avatar avatar-xs pull-up" title="Lilian Fuller">
<img src="assets/img/avatars/5.png" alt="Avatar" class="rounded-circle">
</li>
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" class="avatar avatar-xs pull-up" title="Sophia Wilkerson">
<img src="assets/img/avatars/6.png" alt="Avatar" class="rounded-circle">
</li>
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" class="avatar avatar-xs pull-up" title="Christina Parker">
<img src="assets/img/avatars/7.png" alt="Avatar" class="rounded-circle">
</li>
</ul>
</td>
<td><span class="badge bg-label-primary me-1">Active</span></td>
<td>
<div class="dropdown">
<button type="button" class="btn p-0 dropdown-toggle hide-arrow" data-bs-toggle="dropdown"><i class="bx bx-dots-vertical-rounded"></i></button>
<div class="dropdown-menu">
<a class="dropdown-item" href="javascript:void(0);"><i class="bx bx-edit-alt me-1"></i>Edit</a>
<a class="dropdown-item" href="javascript:void(0);"><i class="bx bx-trash me-1"></i>Delete</a>
</div>
</div>
</td>
</tr>
<tr>
<td><i class="fab fa-react fa-xl text-info me-4"></i> <span>React Project</span></td>
<td>Barry Hunter</td>
<td>
<ul class="list-unstyled users-list m-0 avatar-group d-flex align-items-center">
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" class="avatar avatar-xs pull-up" title="Lilian Fuller">
<img src="assets/img/avatars/5.png" alt="Avatar" class="rounded-circle">
</li>
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" class="avatar avatar-xs pull-up" title="Sophia Wilkerson">
<img src="assets/img/avatars/6.png" alt="Avatar" class="rounded-circle">
</li>
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" class="avatar avatar-xs pull-up" title="Christina Parker">
<img src="assets/img/avatars/7.png" alt="Avatar" class="rounded-circle">
</li>
</ul>
</td>
<td><span class="badge bg-label-success me-1">Completed</span></td>
<td>
<div class="dropdown">
<button type="button" class="btn p-0 dropdown-toggle hide-arrow" data-bs-toggle="dropdown"><i class="bx bx-dots-vertical-rounded"></i></button>
<div class="dropdown-menu">
<a class="dropdown-item" href="javascript:void(0);"><i class="bx bx-edit-alt me-1"></i>Edit</a>
<a class="dropdown-item" href="javascript:void(0);"><i class="bx bx-trash me-1"></i>Delete</a>
</div>
</div>
</td>
</tr>
<tr>
<td><i class="fab fa-vuejs fa-xl text-success me-4"></i> <span>VueJs Project</span></td>
<td>Trevor Baker</td>
<td>
<ul class="list-unstyled users-list m-0 avatar-group d-flex align-items-center">
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" class="avatar avatar-xs pull-up" title="Lilian Fuller">
<img src="assets/img/avatars/5.png" alt="Avatar" class="rounded-circle">
</li>
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" class="avatar avatar-xs pull-up" title="Sophia Wilkerson">
<img src="assets/img/avatars/6.png" alt="Avatar" class="rounded-circle">
</li>
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" class="avatar avatar-xs pull-up" title="Christina Parker">
<img src="assets/img/avatars/7.png" alt="Avatar" class="rounded-circle">
</li>
</ul>
</td>
<td><span class="badge bg-label-info me-1">Scheduled</span></td>
<td>
<div class="dropdown">
<button type="button" class="btn p-0 dropdown-toggle hide-arrow" data-bs-toggle="dropdown"><i class="bx bx-dots-vertical-rounded"></i></button>
<div class="dropdown-menu">
<a class="dropdown-item" href="javascript:void(0);"><i class="bx bx-edit-alt me-1"></i>Edit</a>
<a class="dropdown-item" href="javascript:void(0);"><i class="bx bx-trash me-1"></i>Delete</a>
</div>
</div>
</td>
</tr>
<tr>
<td><i class="fab fa-bootstrap fa-xl text-primary me-4"></i> <span>Bootstrap Project</span></td>
<td>Jerry Milton</td>
<td>
<ul class="list-unstyled users-list m-0 avatar-group d-flex align-items-center">
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" class="avatar avatar-xs pull-up" title="Lilian Fuller">
<img src="assets/img/avatars/5.png" alt="Avatar" class="rounded-circle">
</li>
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" class="avatar avatar-xs pull-up" title="Sophia Wilkerson">
<img src="assets/img/avatars/6.png" alt="Avatar" class="rounded-circle">
</li>
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" class="avatar avatar-xs pull-up" title="Christina Parker">
<img src="assets/img/avatars/7.png" alt="Avatar" class="rounded-circle">
</li>
</ul>
</td>
<td><span class="badge bg-label-warning me-1">Pending</span></td>
<td>
<div class="dropdown">
<button type="button" class="btn p-0 dropdown-toggle hide-arrow" data-bs-toggle="dropdown"><i class="bx bx-dots-vertical-rounded"></i></button>
<div class="dropdown-menu">
<a class="dropdown-item" href="javascript:void(0);"><i class="bx bx-edit-alt me-1"></i>Edit</a>
<a class="dropdown-item" href="javascript:void(0);"><i class="bx bx-trash me-1"></i>Delete</a>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>Table Header & Footer
You can use <thead> for header & <tfoot> for footer headings.
| Project | Client | Users | Status | Actions |
|---|---|---|---|---|
| Angular Project | Albert Cook |
|
Active |
|
| React Project | Barry Hunter |
|
Completed |
|
| VueJs Project | Trevor Baker |
|
Scheduled |
|
| Bootstrap Project | Jerry Milton |
|
Pending |
|
| Project | Client | Users | Status | Actions |
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th>Project</th>
<th>Client</th>
<th>Users</th>
<th>Status</th>
<th class="rounded-end-bottom">Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td><i class="fab fa-angular fa-xl text-danger me-4"></i> <span>Angular Project</span></td>
<td>Albert Cook</td>
<td>
<ul class="list-unstyled users-list m-0 avatar-group d-flex align-items-center">
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" class="avatar avatar-xs pull-up" title="Lilian Fuller">
<img src="assets/img/avatars/5.png" alt="Avatar" class="rounded-circle">
</li>
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" class="avatar avatar-xs pull-up" title="Sophia Wilkerson">
<img src="assets/img/avatars/6.png" alt="Avatar" class="rounded-circle">
</li>
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" class="avatar avatar-xs pull-up" title="Christina Parker">
<img src="assets/img/avatars/7.png" alt="Avatar" class="rounded-circle">
</li>
</ul>
</td>
<td><span class="badge bg-label-primary me-1">Active</span></td>
<td>
<div class="dropdown">
<button type="button" class="btn p-0 dropdown-toggle hide-arrow" data-bs-toggle="dropdown"><i class="bx bx-dots-vertical-rounded"></i></button>
<div class="dropdown-menu">
<a class="dropdown-item" href="javascript:void(0);"><i class="bx bx-edit-alt me-1"></i>Edit</a>
<a class="dropdown-item" href="javascript:void(0);"><i class="bx bx-trash me-1"></i>Delete</a>
</div>
</div>
</td>
</tr>
<tr>
<td><i class="fab fa-react fa-xl text-info me-4"></i> <span>React Project</span></td>
<td>Barry Hunter</td>
<td>
<ul class="list-unstyled users-list m-0 avatar-group d-flex align-items-center">
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" class="avatar avatar-xs pull-up" title="Lilian Fuller">
<img src="assets/img/avatars/5.png" alt="Avatar" class="rounded-circle">
</li>
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" class="avatar avatar-xs pull-up" title="Sophia Wilkerson">
<img src="assets/img/avatars/6.png" alt="Avatar" class="rounded-circle">
</li>
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" class="avatar avatar-xs pull-up" title="Christina Parker">
<img src="assets/img/avatars/7.png" alt="Avatar" class="rounded-circle">
</li>
</ul>
</td>
<td><span class="badge bg-label-success me-1">Completed</span></td>
<td>
<div class="dropdown">
<button type="button" class="btn p-0 dropdown-toggle hide-arrow" data-bs-toggle="dropdown"><i class="bx bx-dots-vertical-rounded"></i></button>
<div class="dropdown-menu">
<a class="dropdown-item" href="javascript:void(0);"><i class="bx bx-edit-alt me-1"></i>Edit</a>
<a class="dropdown-item" href="javascript:void(0);"><i class="bx bx-trash me-1"></i>Delete</a>
</div>
</div>
</td>
</tr>
<tr>
<td><i class="fab fa-vuejs fa-xl text-success me-4"></i> <span>VueJs Project</span></td>
<td>Trevor Baker</td>
<td>
<ul class="list-unstyled users-list m-0 avatar-group d-flex align-items-center">
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" class="avatar avatar-xs pull-up" title="Lilian Fuller">
<img src="assets/img/avatars/5.png" alt="Avatar" class="rounded-circle">
</li>
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" class="avatar avatar-xs pull-up" title="Sophia Wilkerson">
<img src="assets/img/avatars/6.png" alt="Avatar" class="rounded-circle">
</li>
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" class="avatar avatar-xs pull-up" title="Christina Parker">
<img src="assets/img/avatars/7.png" alt="Avatar" class="rounded-circle">
</li>
</ul>
</td>
<td><span class="badge bg-label-info me-1">Scheduled</span></td>
<td>
<div class="dropdown">
<button type="button" class="btn p-0 dropdown-toggle hide-arrow" data-bs-toggle="dropdown"><i class="bx bx-dots-vertical-rounded"></i></button>
<div class="dropdown-menu">
<a class="dropdown-item" href="javascript:void(0);"><i class="bx bx-edit-alt me-1"></i>Edit</a>
<a class="dropdown-item" href="javascript:void(0);"><i class="bx bx-trash me-1"></i>Delete</a>
</div>
</div>
</td>
</tr>
<tr>
<td><i class="fab fa-bootstrap fa-xl text-primary me-4"></i> <span>Bootstrap Project</span></td>
<td>Jerry Milton</td>
<td>
<ul class="list-unstyled users-list m-0 avatar-group d-flex align-items-center">
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" class="avatar avatar-xs pull-up" title="Lilian Fuller">
<img src="assets/img/avatars/5.png" alt="Avatar" class="rounded-circle">
</li>
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" class="avatar avatar-xs pull-up" title="Sophia Wilkerson">
<img src="assets/img/avatars/6.png" alt="Avatar" class="rounded-circle">
</li>
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" class="avatar avatar-xs pull-up" title="Christina Parker">
<img src="assets/img/avatars/7.png" alt="Avatar" class="rounded-circle">
</li>
</ul>
</td>
<td><span class="badge bg-label-warning me-1">Pending</span></td>
<td>
<div class="dropdown">
<button type="button" class="btn p-0 dropdown-toggle hide-arrow" data-bs-toggle="dropdown"><i class="bx bx-dots-vertical-rounded"></i></button>
<div class="dropdown-menu">
<a class="dropdown-item" href="javascript:void(0);"><i class="bx bx-edit-alt me-1"></i>Edit</a>
<a class="dropdown-item" href="javascript:void(0);"><i class="bx bx-trash me-1"></i>Delete</a>
</div>
</div>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<th class="rounded-start-bottom">Project</th>
<th>Client</th>
<th>Users</th>
<th>Status</th>
<th>Actions</th>
</tr>
</tfoot>
</table>
</div>Table with Caption
A <caption> functions like a heading for a table. It helps users with screen readers to find a table and understand what it’s about and decide if they want to read it.
| Project | Client | Users | Status | Actions |
|---|---|---|---|---|
| Angular Project | Albert Cook |
|
Active |
|
| React Project | Barry Hunter |
|
Completed |
|
| VueJs Project | Trevor Baker |
|
Scheduled |
|
| Bootstrap Project | Jerry Milton |
|
Pending |
|
<div class="table-responsive">
<table class="table">
<caption class="ms-4">List of Projects</caption>
<thead>
<tr>
<th>Project</th>
<th>Client</th>
<th>Users</th>
<th>Status</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td><i class="fab fa-angular fa-xl text-danger me-4"></i> <span>Angular Project</span></td>
<td>Albert Cook</td>
<td>
<ul class="list-unstyled users-list m-0 avatar-group d-flex align-items-center">
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" class="avatar avatar-xs pull-up" title="Lilian Fuller">
<img src="assets/img/avatars/5.png" alt="Avatar" class="rounded-circle">
</li>
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" class="avatar avatar-xs pull-up" title="Sophia Wilkerson">
<img src="assets/img/avatars/6.png" alt="Avatar" class="rounded-circle">
</li>
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" class="avatar avatar-xs pull-up" title="Christina Parker">
<img src="assets/img/avatars/7.png" alt="Avatar" class="rounded-circle">
</li>
</ul>
</td>
<td><span class="badge bg-label-primary me-1">Active</span></td>
<td>
<div class="dropdown">
<button type="button" class="btn p-0 dropdown-toggle hide-arrow" data-bs-toggle="dropdown"><i class="bx bx-dots-vertical-rounded"></i></button>
<div class="dropdown-menu">
<a class="dropdown-item" href="javascript:void(0);"><i class="bx bx-edit-alt me-1"></i>Edit</a>
<a class="dropdown-item" href="javascript:void(0);"><i class="bx bx-trash me-1"></i>Delete</a>
</div>
</div>
</td>
</tr>
<tr>
<td><i class="fab fa-react fa-xl text-info me-4"></i> <span>React Project</span></td>
<td>Barry Hunter</td>
<td>
<ul class="list-unstyled users-list m-0 avatar-group d-flex align-items-center">
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" class="avatar avatar-xs pull-up" title="Lilian Fuller">
<img src="assets/img/avatars/5.png" alt="Avatar" class="rounded-circle">
</li>
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" class="avatar avatar-xs pull-up" title="Sophia Wilkerson">
<img src="assets/img/avatars/6.png" alt="Avatar" class="rounded-circle">
</li>
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" class="avatar avatar-xs pull-up" title="Christina Parker">
<img src="assets/img/avatars/7.png" alt="Avatar" class="rounded-circle">
</li>
</ul>
</td>
<td><span class="badge bg-label-success me-1">Completed</span></td>
<td>
<div class="dropdown">
<button type="button" class="btn p-0 dropdown-toggle hide-arrow" data-bs-toggle="dropdown"><i class="bx bx-dots-vertical-rounded"></i></button>
<div class="dropdown-menu">
<a class="dropdown-item" href="javascript:void(0);"><i class="bx bx-edit-alt me-1"></i>Edit</a>
<a class="dropdown-item" href="javascript:void(0);"><i class="bx bx-trash me-1"></i>Delete</a>
</div>
</div>
</td>
</tr>
<tr>
<td><i class="fab fa-vuejs fa-xl text-success me-4"></i> <span>VueJs Project</span></td>
<td>Trevor Baker</td>
<td>
<ul class="list-unstyled users-list m-0 avatar-group d-flex align-items-center">
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" class="avatar avatar-xs pull-up" title="Lilian Fuller">
<img src="assets/img/avatars/5.png" alt="Avatar" class="rounded-circle">
</li>
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" class="avatar avatar-xs pull-up" title="Sophia Wilkerson">
<img src="assets/img/avatars/6.png" alt="Avatar" class="rounded-circle">
</li>
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" class="avatar avatar-xs pull-up" title="Christina Parker">
<img src="assets/img/avatars/7.png" alt="Avatar" class="rounded-circle">
</li>
</ul>
</td>
<td><span class="badge bg-label-info me-1">Scheduled</span></td>
<td>
<div class="dropdown">
<button type="button" class="btn p-0 dropdown-toggle hide-arrow" data-bs-toggle="dropdown"><i class="bx bx-dots-vertical-rounded"></i></button>
<div class="dropdown-menu">
<a class="dropdown-item" href="javascript:void(0);"><i class="bx bx-edit-alt me-1"></i>Edit</a>
<a class="dropdown-item" href="javascript:void(0);"><i class="bx bx-trash me-1"></i>Delete</a>
</div>
</div>
</td>
</tr>
<tr>
<td><i class="fab fa-bootstrap fa-xl text-primary me-4"></i> <span>Bootstrap Project</span></td>
<td>Jerry Milton</td>
<td>
<ul class="list-unstyled users-list m-0 avatar-group d-flex align-items-center">
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" class="avatar avatar-xs pull-up" title="Lilian Fuller">
<img src="assets/img/avatars/5.png" alt="Avatar" class="rounded-circle">
</li>
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" class="avatar avatar-xs pull-up" title="Sophia Wilkerson">
<img src="assets/img/avatars/6.png" alt="Avatar" class="rounded-circle">
</li>
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" class="avatar avatar-xs pull-up" title="Christina Parker">
<img src="assets/img/avatars/7.png" alt="Avatar" class="rounded-circle">
</li>
</ul>
</td>
<td><span class="badge bg-label-warning me-1">Pending</span></td>
<td>
<div class="dropdown">
<button type="button" class="btn p-0 dropdown-toggle hide-arrow" data-bs-toggle="dropdown"><i class="bx bx-dots-vertical-rounded"></i></button>
<div class="dropdown-menu">
<a class="dropdown-item" href="javascript:void(0);"><i class="bx bx-edit-alt me-1"></i>Edit</a>
<a class="dropdown-item" href="javascript:void(0);"><i class="bx bx-trash me-1"></i>Delete</a>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>Striped Rows
Use .table-striped with .table to add zebra-striping to any table row within the <tbody>.
| Project | Client | Users | Status | Actions |
|---|---|---|---|---|
| Angular Project | Albert Cook |
|
Active |
|
| React Project | Barry Hunter |
|
Completed |
|
| VueJs Project | Trevor Baker |
|
Scheduled |
|
| Bootstrap Project | Jerry Milton |
|
Pending |
|
<div class="table-responsive">
<table class="table table-striped">
<thead>
<tr>
<th>Project</th>
<th>Client</th>
<th>Users</th>
<th>Status</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td><i class="fab fa-angular fa-xl text-danger me-4"></i> <span>Angular Project</span></td>
<td>Albert Cook</td>
<td>
<ul class="list-unstyled users-list m-0 avatar-group d-flex align-items-center">
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" class="avatar avatar-xs pull-up" title="Lilian Fuller">
<img src="assets/img/avatars/5.png" alt="Avatar" class="rounded-circle">
</li>
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" class="avatar avatar-xs pull-up" title="Sophia Wilkerson">
<img src="assets/img/avatars/6.png" alt="Avatar" class="rounded-circle">
</li>
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" class="avatar avatar-xs pull-up" title="Christina Parker">
<img src="assets/img/avatars/7.png" alt="Avatar" class="rounded-circle">
</li>
</ul>
</td>
<td><span class="badge bg-label-primary me-1">Active</span></td>
<td>
<div class="dropdown">
<button type="button" class="btn p-0 dropdown-toggle hide-arrow" data-bs-toggle="dropdown"><i class="bx bx-dots-vertical-rounded"></i></button>
<div class="dropdown-menu">
<a class="dropdown-item" href="javascript:void(0);"><i class="bx bx-edit-alt me-1"></i>Edit</a>
<a class="dropdown-item" href="javascript:void(0);"><i class="bx bx-trash me-1"></i>Delete</a>
</div>
</div>
</td>
</tr>
<tr>
<td><i class="fab fa-react fa-xl text-info me-4"></i> <span>React Project</span></td>
<td>Barry Hunter</td>
<td>
<ul class="list-unstyled users-list m-0 avatar-group d-flex align-items-center">
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" class="avatar avatar-xs pull-up" title="Lilian Fuller">
<img src="assets/img/avatars/5.png" alt="Avatar" class="rounded-circle">
</li>
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" class="avatar avatar-xs pull-up" title="Sophia Wilkerson">
<img src="assets/img/avatars/6.png" alt="Avatar" class="rounded-circle">
</li>
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" class="avatar avatar-xs pull-up" title="Christina Parker">
<img src="assets/img/avatars/7.png" alt="Avatar" class="rounded-circle">
</li>
</ul>
</td>
<td><span class="badge bg-label-success me-1">Completed</span></td>
<td>
<div class="dropdown">
<button type="button" class="btn p-0 dropdown-toggle hide-arrow" data-bs-toggle="dropdown"><i class="bx bx-dots-vertical-rounded"></i></button>
<div class="dropdown-menu">
<a class="dropdown-item" href="javascript:void(0);"><i class="bx bx-edit-alt me-1"></i>Edit</a>
<a class="dropdown-item" href="javascript:void(0);"><i class="bx bx-trash me-1"></i>Delete</a>
</div>
</div>
</td>
</tr>
<tr>
<td><i class="fab fa-vuejs fa-xl text-success me-4"></i> <span>VueJs Project</span></td>
<td>Trevor Baker</td>
<td>
<ul class="list-unstyled users-list m-0 avatar-group d-flex align-items-center">
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" class="avatar avatar-xs pull-up" title="Lilian Fuller">
<img src="assets/img/avatars/5.png" alt="Avatar" class="rounded-circle">
</li>
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" class="avatar avatar-xs pull-up" title="Sophia Wilkerson">
<img src="assets/img/avatars/6.png" alt="Avatar" class="rounded-circle">
</li>
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" class="avatar avatar-xs pull-up" title="Christina Parker">
<img src="assets/img/avatars/7.png" alt="Avatar" class="rounded-circle">
</li>
</ul>
</td>
<td><span class="badge bg-label-info me-1">Scheduled</span></td>
<td>
<div class="dropdown">
<button type="button" class="btn p-0 dropdown-toggle hide-arrow" data-bs-toggle="dropdown"><i class="bx bx-dots-vertical-rounded"></i></button>
<div class="dropdown-menu">
<a class="dropdown-item" href="javascript:void(0);"><i class="bx bx-edit-alt me-1"></i>Edit</a>
<a class="dropdown-item" href="javascript:void(0);"><i class="bx bx-trash me-1"></i>Delete</a>
</div>
</div>
</td>
</tr>
<tr>
<td><i class="fab fa-bootstrap fa-xl text-primary me-4"></i> <span>Bootstrap Project</span></td>
<td>Jerry Milton</td>
<td>
<ul class="list-unstyled users-list m-0 avatar-group d-flex align-items-center">
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" class="avatar avatar-xs pull-up" title="Lilian Fuller">
<img src="assets/img/avatars/5.png" alt="Avatar" class="rounded-circle">
</li>
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" class="avatar avatar-xs pull-up" title="Sophia Wilkerson">
<img src="assets/img/avatars/6.png" alt="Avatar" class="rounded-circle">
</li>
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" class="avatar avatar-xs pull-up" title="Christina Parker">
<img src="assets/img/avatars/7.png" alt="Avatar" class="rounded-circle">
</li>
</ul>
</td>
<td><span class="badge bg-label-warning me-1">Pending</span></td>
<td>
<div class="dropdown">
<button type="button" class="btn p-0 dropdown-toggle hide-arrow" data-bs-toggle="dropdown"><i class="bx bx-dots-vertical-rounded"></i></button>
<div class="dropdown-menu">
<a class="dropdown-item" href="javascript:void(0);"><i class="bx bx-edit-alt me-1"></i>Edit</a>
<a class="dropdown-item" href="javascript:void(0);"><i class="bx bx-trash me-1"></i>Delete</a>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>Bordered Table
Add .table-bordered with .table for borders on all sides of the table and cells.
| Project | Client | Users | Status | Actions |
|---|---|---|---|---|
| Angular Project | Albert Cook |
|
Active |
|
| React Project | Barry Hunter |
|
Completed |
|
| VueJs Project | Trevor Baker |
|
Scheduled |
|
| Bootstrap Project | Jerry Milton |
|
Pending |
|
<div class="table-responsive">
<table class="table table-bordered">
<thead>
<tr>
<th>Project</th>
<th>Client</th>
<th>Users</th>
<th>Status</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td><i class="fab fa-angular fa-xl text-danger me-4"></i> <span>Angular Project</span></td>
<td>Albert Cook</td>
<td>
<ul class="list-unstyled users-list m-0 avatar-group d-flex align-items-center">
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" class="avatar avatar-xs pull-up" title="Lilian Fuller">
<img src="assets/img/avatars/5.png" alt="Avatar" class="rounded-circle">
</li>
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" class="avatar avatar-xs pull-up" title="Sophia Wilkerson">
<img src="assets/img/avatars/6.png" alt="Avatar" class="rounded-circle">
</li>
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" class="avatar avatar-xs pull-up" title="Christina Parker">
<img src="assets/img/avatars/7.png" alt="Avatar" class="rounded-circle">
</li>
</ul>
</td>
<td><span class="badge bg-label-primary me-1">Active</span></td>
<td>
<div class="dropdown">
<button type="button" class="btn p-0 dropdown-toggle hide-arrow" data-bs-toggle="dropdown"><i class="bx bx-dots-vertical-rounded"></i></button>
<div class="dropdown-menu">
<a class="dropdown-item" href="javascript:void(0);"><i class="bx bx-edit-alt me-1"></i>Edit</a>
<a class="dropdown-item" href="javascript:void(0);"><i class="bx bx-trash me-1"></i>Delete</a>
</div>
</div>
</td>
</tr>
<tr>
<td><i class="fab fa-react fa-xl text-info me-4"></i> <span>React Project</span></td>
<td>Barry Hunter</td>
<td>
<ul class="list-unstyled users-list m-0 avatar-group d-flex align-items-center">
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" class="avatar avatar-xs pull-up" title="Lilian Fuller">
<img src="assets/img/avatars/5.png" alt="Avatar" class="rounded-circle">
</li>
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" class="avatar avatar-xs pull-up" title="Sophia Wilkerson">
<img src="assets/img/avatars/6.png" alt="Avatar" class="rounded-circle">
</li>
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" class="avatar avatar-xs pull-up" title="Christina Parker">
<img src="assets/img/avatars/7.png" alt="Avatar" class="rounded-circle">
</li>
</ul>
</td>
<td><span class="badge bg-label-success me-1">Completed</span></td>
<td>
<div class="dropdown">
<button type="button" class="btn p-0 dropdown-toggle hide-arrow" data-bs-toggle="dropdown"><i class="bx bx-dots-vertical-rounded"></i></button>
<div class="dropdown-menu">
<a class="dropdown-item" href="javascript:void(0);"><i class="bx bx-edit-alt me-1"></i>Edit</a>
<a class="dropdown-item" href="javascript:void(0);"><i class="bx bx-trash me-1"></i>Delete</a>
</div>
</div>
</td>
</tr>
<tr>
<td><i class="fab fa-vuejs fa-xl text-success me-4"></i> <span>VueJs Project</span></td>
<td>Trevor Baker</td>
<td>
<ul class="list-unstyled users-list m-0 avatar-group d-flex align-items-center">
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" class="avatar avatar-xs pull-up" title="Lilian Fuller">
<img src="assets/img/avatars/5.png" alt="Avatar" class="rounded-circle">
</li>
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" class="avatar avatar-xs pull-up" title="Sophia Wilkerson">
<img src="assets/img/avatars/6.png" alt="Avatar" class="rounded-circle">
</li>
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" class="avatar avatar-xs pull-up" title="Christina Parker">
<img src="assets/img/avatars/7.png" alt="Avatar" class="rounded-circle">
</li>
</ul>
</td>
<td><span class="badge bg-label-info me-1">Scheduled</span></td>
<td>
<div class="dropdown">
<button type="button" class="btn p-0 dropdown-toggle hide-arrow" data-bs-toggle="dropdown"><i class="bx bx-dots-vertical-rounded"></i></button>
<div class="dropdown-menu">
<a class="dropdown-item" href="javascript:void(0);"><i class="bx bx-edit-alt me-1"></i>Edit</a>
<a class="dropdown-item" href="javascript:void(0);"><i class="bx bx-trash me-1"></i>Delete</a>
</div>
</div>
</td>
</tr>
<tr>
<td><i class="fab fa-bootstrap fa-xl text-primary me-4"></i> <span>Bootstrap Project</span></td>
<td>Jerry Milton</td>
<td>
<ul class="list-unstyled users-list m-0 avatar-group d-flex align-items-center">
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" class="avatar avatar-xs pull-up" title="Lilian Fuller">
<img src="assets/img/avatars/5.png" alt="Avatar" class="rounded-circle">
</li>
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" class="avatar avatar-xs pull-up" title="Sophia Wilkerson">
<img src="assets/img/avatars/6.png" alt="Avatar" class="rounded-circle">
</li>
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" class="avatar avatar-xs pull-up" title="Christina Parker">
<img src="assets/img/avatars/7.png" alt="Avatar" class="rounded-circle">
</li>
</ul>
</td>
<td><span class="badge bg-label-warning me-1">Pending</span></td>
<td>
<div class="dropdown">
<button type="button" class="btn p-0 dropdown-toggle hide-arrow" data-bs-toggle="dropdown"><i class="bx bx-dots-vertical-rounded"></i></button>
<div class="dropdown-menu">
<a class="dropdown-item" href="javascript:void(0);"><i class="bx bx-edit-alt me-1"></i>Edit</a>
<a class="dropdown-item" href="javascript:void(0);"><i class="bx bx-trash me-1"></i>Delete</a>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>To use color border, use below border utilities classes with .table-bordered class
| Class | Value |
|---|---|
class="border-{value}"
|
primary | secondary | success | danger | warning | info | dark |
Borderless Table
Add .table-borderless with .table for a table without borders.
| Project | Client | Users | Status | Actions |
|---|---|---|---|---|
| Angular Project | Albert Cook |
|
Active |
|
| React Project | Barry Hunter |
|
Completed |
|
| VueJs Project | Trevor Baker |
|
Scheduled |
|
| Bootstrap Project | Jerry Milton |
|
Pending |
|
<div class="table-responsive">
<table class="table table-borderless">
<thead>
<tr>
<th>Project</th>
<th>Client</th>
<th>Users</th>
<th>Status</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td><i class="fab fa-angular fa-xl text-danger me-4"></i> <span>Angular Project</span></td>
<td>Albert Cook</td>
<td>
<ul class="list-unstyled users-list m-0 avatar-group d-flex align-items-center">
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" class="avatar avatar-xs pull-up" title="Lilian Fuller">
<img src="assets/img/avatars/5.png" alt="Avatar" class="rounded-circle">
</li>
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" class="avatar avatar-xs pull-up" title="Sophia Wilkerson">
<img src="assets/img/avatars/6.png" alt="Avatar" class="rounded-circle">
</li>
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" class="avatar avatar-xs pull-up" title="Christina Parker">
<img src="assets/img/avatars/7.png" alt="Avatar" class="rounded-circle">
</li>
</ul>
</td>
<td><span class="badge bg-label-primary me-1">Active</span></td>
<td>
<div class="dropdown">
<button type="button" class="btn p-0 dropdown-toggle hide-arrow" data-bs-toggle="dropdown"><i class="bx bx-dots-vertical-rounded"></i></button>
<div class="dropdown-menu">
<a class="dropdown-item" href="javascript:void(0);"><i class="bx bx-edit-alt me-1"></i>Edit</a>
<a class="dropdown-item" href="javascript:void(0);"><i class="bx bx-trash me-1"></i>Delete</a>
</div>
</div>
</td>
</tr>
<tr>
<td><i class="fab fa-react fa-xl text-info me-4"></i> <span>React Project</span></td>
<td>Barry Hunter</td>
<td>
<ul class="list-unstyled users-list m-0 avatar-group d-flex align-items-center">
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" class="avatar avatar-xs pull-up" title="Lilian Fuller">
<img src="assets/img/avatars/5.png" alt="Avatar" class="rounded-circle">
</li>
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" class="avatar avatar-xs pull-up" title="Sophia Wilkerson">
<img src="assets/img/avatars/6.png" alt="Avatar" class="rounded-circle">
</li>
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" class="avatar avatar-xs pull-up" title="Christina Parker">
<img src="assets/img/avatars/7.png" alt="Avatar" class="rounded-circle">
</li>
</ul>
</td>
<td><span class="badge bg-label-success me-1">Completed</span></td>
<td>
<div class="dropdown">
<button type="button" class="btn p-0 dropdown-toggle hide-arrow" data-bs-toggle="dropdown"><i class="bx bx-dots-vertical-rounded"></i></button>
<div class="dropdown-menu">
<a class="dropdown-item" href="javascript:void(0);"><i class="bx bx-edit-alt me-1"></i>Edit</a>
<a class="dropdown-item" href="javascript:void(0);"><i class="bx bx-trash me-1"></i>Delete</a>
</div>
</div>
</td>
</tr>
<tr>
<td><i class="fab fa-vuejs fa-xl text-success me-4"></i> <span>VueJs Project</span></td>
<td>Trevor Baker</td>
<td>
<ul class="list-unstyled users-list m-0 avatar-group d-flex align-items-center">
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" class="avatar avatar-xs pull-up" title="Lilian Fuller">
<img src="assets/img/avatars/5.png" alt="Avatar" class="rounded-circle">
</li>
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" class="avatar avatar-xs pull-up" title="Sophia Wilkerson">
<img src="assets/img/avatars/6.png" alt="Avatar" class="rounded-circle">
</li>
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" class="avatar avatar-xs pull-up" title="Christina Parker">
<img src="assets/img/avatars/7.png" alt="Avatar" class="rounded-circle">
</li>
</ul>
</td>
<td><span class="badge bg-label-info me-1">Scheduled</span></td>
<td>
<div class="dropdown">
<button type="button" class="btn p-0 dropdown-toggle hide-arrow" data-bs-toggle="dropdown"><i class="bx bx-dots-vertical-rounded"></i></button>
<div class="dropdown-menu">
<a class="dropdown-item" href="javascript:void(0);"><i class="bx bx-edit-alt me-1"></i>Edit</a>
<a class="dropdown-item" href="javascript:void(0);"><i class="bx bx-trash me-1"></i>Delete</a>
</div>
</div>
</td>
</tr>
<tr>
<td><i class="fab fa-bootstrap fa-xl text-primary me-4"></i> <span>Bootstrap Project</span></td>
<td>Jerry Milton</td>
<td>
<ul class="list-unstyled users-list m-0 avatar-group d-flex align-items-center">
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" class="avatar avatar-xs pull-up" title="Lilian Fuller">
<img src="assets/img/avatars/5.png" alt="Avatar" class="rounded-circle">
</li>
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" class="avatar avatar-xs pull-up" title="Sophia Wilkerson">
<img src="assets/img/avatars/6.png" alt="Avatar" class="rounded-circle">
</li>
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" class="avatar avatar-xs pull-up" title="Christina Parker">
<img src="assets/img/avatars/7.png" alt="Avatar" class="rounded-circle">
</li>
</ul>
</td>
<td><span class="badge bg-label-warning me-1">Pending</span></td>
<td>
<div class="dropdown">
<button type="button" class="btn p-0 dropdown-toggle hide-arrow" data-bs-toggle="dropdown"><i class="bx bx-dots-vertical-rounded"></i></button>
<div class="dropdown-menu">
<a class="dropdown-item" href="javascript:void(0);"><i class="bx bx-edit-alt me-1"></i>Edit</a>
<a class="dropdown-item" href="javascript:void(0);"><i class="bx bx-trash me-1"></i>Delete</a>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>Hoverable Rows
Add .table-hover with .table to enable a hover state on table rows within a <tbody>.
| Project | Client | Users | Status | Actions |
|---|---|---|---|---|
| Angular Project | Albert Cook |
|
Active |
|
| React Project | Barry Hunter |
|
Completed |
|
| VueJs Project | Trevor Baker |
|
Scheduled |
|
| Bootstrap Project | Jerry Milton |
|
Pending |
|
<div class="table-responsive">
<table class="table table-hover">
<thead>
<tr>
<th>Project</th>
<th>Client</th>
<th>Users</th>
<th>Status</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td><i class="fab fa-angular fa-xl text-danger me-4"></i> <span>Angular Project</span></td>
<td>Albert Cook</td>
<td>
<ul class="list-unstyled users-list m-0 avatar-group d-flex align-items-center">
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" class="avatar avatar-xs pull-up" title="Lilian Fuller">
<img src="assets/img/avatars/5.png" alt="Avatar" class="rounded-circle">
</li>
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" class="avatar avatar-xs pull-up" title="Sophia Wilkerson">
<img src="assets/img/avatars/6.png" alt="Avatar" class="rounded-circle">
</li>
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" class="avatar avatar-xs pull-up" title="Christina Parker">
<img src="assets/img/avatars/7.png" alt="Avatar" class="rounded-circle">
</li>
</ul>
</td>
<td><span class="badge bg-label-primary me-1">Active</span></td>
<td>
<div class="dropdown">
<button type="button" class="btn p-0 dropdown-toggle hide-arrow" data-bs-toggle="dropdown"><i class="bx bx-dots-vertical-rounded"></i></button>
<div class="dropdown-menu">
<a class="dropdown-item" href="javascript:void(0);"><i class="bx bx-edit-alt me-1"></i>Edit</a>
<a class="dropdown-item" href="javascript:void(0);"><i class="bx bx-trash me-1"></i>Delete</a>
</div>
</div>
</td>
</tr>
<tr>
<td><i class="fab fa-react fa-xl text-info me-4"></i> <span>React Project</span></td>
<td>Barry Hunter</td>
<td>
<ul class="list-unstyled users-list m-0 avatar-group d-flex align-items-center">
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" class="avatar avatar-xs pull-up" title="Lilian Fuller">
<img src="assets/img/avatars/5.png" alt="Avatar" class="rounded-circle">
</li>
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" class="avatar avatar-xs pull-up" title="Sophia Wilkerson">
<img src="assets/img/avatars/6.png" alt="Avatar" class="rounded-circle">
</li>
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" class="avatar avatar-xs pull-up" title="Christina Parker">
<img src="assets/img/avatars/7.png" alt="Avatar" class="rounded-circle">
</li>
</ul>
</td>
<td><span class="badge bg-label-success me-1">Completed</span></td>
<td>
<div class="dropdown">
<button type="button" class="btn p-0 dropdown-toggle hide-arrow" data-bs-toggle="dropdown"><i class="bx bx-dots-vertical-rounded"></i></button>
<div class="dropdown-menu">
<a class="dropdown-item" href="javascript:void(0);"><i class="bx bx-edit-alt me-1"></i>Edit</a>
<a class="dropdown-item" href="javascript:void(0);"><i class="bx bx-trash me-1"></i>Delete</a>
</div>
</div>
</td>
</tr>
<tr>
<td><i class="fab fa-vuejs fa-xl text-success me-4"></i> <span>VueJs Project</span></td>
<td>Trevor Baker</td>
<td>
<ul class="list-unstyled users-list m-0 avatar-group d-flex align-items-center">
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" class="avatar avatar-xs pull-up" title="Lilian Fuller">
<img src="assets/img/avatars/5.png" alt="Avatar" class="rounded-circle">
</li>
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" class="avatar avatar-xs pull-up" title="Sophia Wilkerson">
<img src="assets/img/avatars/6.png" alt="Avatar" class="rounded-circle">
</li>
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" class="avatar avatar-xs pull-up" title="Christina Parker">
<img src="assets/img/avatars/7.png" alt="Avatar" class="rounded-circle">
</li>
</ul>
</td>
<td><span class="badge bg-label-info me-1">Scheduled</span></td>
<td>
<div class="dropdown">
<button type="button" class="btn p-0 dropdown-toggle hide-arrow" data-bs-toggle="dropdown"><i class="bx bx-dots-vertical-rounded"></i></button>
<div class="dropdown-menu">
<a class="dropdown-item" href="javascript:void(0);"><i class="bx bx-edit-alt me-1"></i>Edit</a>
<a class="dropdown-item" href="javascript:void(0);"><i class="bx bx-trash me-1"></i>Delete</a>
</div>
</div>
</td>
</tr>
<tr>
<td><i class="fab fa-bootstrap fa-xl text-primary me-4"></i> <span>Bootstrap Project</span></td>
<td>Jerry Milton</td>
<td>
<ul class="list-unstyled users-list m-0 avatar-group d-flex align-items-center">
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" class="avatar avatar-xs pull-up" title="Lilian Fuller">
<img src="assets/img/avatars/5.png" alt="Avatar" class="rounded-circle">
</li>
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" class="avatar avatar-xs pull-up" title="Sophia Wilkerson">
<img src="assets/img/avatars/6.png" alt="Avatar" class="rounded-circle">
</li>
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" class="avatar avatar-xs pull-up" title="Christina Parker">
<img src="assets/img/avatars/7.png" alt="Avatar" class="rounded-circle">
</li>
</ul>
</td>
<td><span class="badge bg-label-warning me-1">Pending</span></td>
<td>
<div class="dropdown">
<button type="button" class="btn p-0 dropdown-toggle hide-arrow" data-bs-toggle="dropdown"><i class="bx bx-dots-vertical-rounded"></i></button>
<div class="dropdown-menu">
<a class="dropdown-item" href="javascript:void(0);"><i class="bx bx-edit-alt me-1"></i>Edit</a>
<a class="dropdown-item" href="javascript:void(0);"><i class="bx bx-trash me-1"></i>Delete</a>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>Small Table
Add .table-sm with .table to make tables more compact by cutting cell padding in half.
| Project | Client | Users | Status | Actions |
|---|---|---|---|---|
| Angular Project | Albert Cook |
|
Active |
|
| React Project | Barry Hunter |
|
Completed |
|
| VueJs Project | Trevor Baker |
|
Scheduled |
|
| Bootstrap Project | Jerry Milton |
|
Pending |
|
<div class="table-responsive">
<table class="table table-sm">
<thead>
<tr>
<th>Project</th>
<th>Client</th>
<th>Users</th>
<th>Status</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td><i class="fab fa-angular fa-xl text-danger me-4"></i> <span>Angular Project</span></td>
<td>Albert Cook</td>
<td>
<ul class="list-unstyled users-list m-0 avatar-group d-flex align-items-center">
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" class="avatar avatar-xs pull-up" title="Lilian Fuller">
<img src="assets/img/avatars/5.png" alt="Avatar" class="rounded-circle">
</li>
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" class="avatar avatar-xs pull-up" title="Sophia Wilkerson">
<img src="assets/img/avatars/6.png" alt="Avatar" class="rounded-circle">
</li>
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" class="avatar avatar-xs pull-up" title="Christina Parker">
<img src="assets/img/avatars/7.png" alt="Avatar" class="rounded-circle">
</li>
</ul>
</td>
<td><span class="badge bg-label-primary me-1">Active</span></td>
<td>
<div class="dropdown">
<button type="button" class="btn p-0 dropdown-toggle hide-arrow" data-bs-toggle="dropdown"><i class="bx bx-dots-vertical-rounded"></i></button>
<div class="dropdown-menu">
<a class="dropdown-item" href="javascript:void(0);"><i class="bx bx-edit-alt me-1"></i>Edit</a>
<a class="dropdown-item" href="javascript:void(0);"><i class="bx bx-trash me-1"></i>Delete</a>
</div>
</div>
</td>
</tr>
<tr>
<td><i class="fab fa-react fa-xl text-info me-4"></i> <span>React Project</span></td>
<td>Barry Hunter</td>
<td>
<ul class="list-unstyled users-list m-0 avatar-group d-flex align-items-center">
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" class="avatar avatar-xs pull-up" title="Lilian Fuller">
<img src="assets/img/avatars/5.png" alt="Avatar" class="rounded-circle">
</li>
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" class="avatar avatar-xs pull-up" title="Sophia Wilkerson">
<img src="assets/img/avatars/6.png" alt="Avatar" class="rounded-circle">
</li>
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" class="avatar avatar-xs pull-up" title="Christina Parker">
<img src="assets/img/avatars/7.png" alt="Avatar" class="rounded-circle">
</li>
</ul>
</td>
<td><span class="badge bg-label-success me-1">Completed</span></td>
<td>
<div class="dropdown">
<button type="button" class="btn p-0 dropdown-toggle hide-arrow" data-bs-toggle="dropdown"><i class="bx bx-dots-vertical-rounded"></i></button>
<div class="dropdown-menu">
<a class="dropdown-item" href="javascript:void(0);"><i class="bx bx-edit-alt me-1"></i>Edit</a>
<a class="dropdown-item" href="javascript:void(0);"><i class="bx bx-trash me-1"></i>Delete</a>
</div>
</div>
</td>
</tr>
<tr>
<td><i class="fab fa-vuejs fa-xl text-success me-4"></i> <span>VueJs Project</span></td>
<td>Trevor Baker</td>
<td>
<ul class="list-unstyled users-list m-0 avatar-group d-flex align-items-center">
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" class="avatar avatar-xs pull-up" title="Lilian Fuller">
<img src="assets/img/avatars/5.png" alt="Avatar" class="rounded-circle">
</li>
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" class="avatar avatar-xs pull-up" title="Sophia Wilkerson">
<img src="assets/img/avatars/6.png" alt="Avatar" class="rounded-circle">
</li>
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" class="avatar avatar-xs pull-up" title="Christina Parker">
<img src="assets/img/avatars/7.png" alt="Avatar" class="rounded-circle">
</li>
</ul>
</td>
<td><span class="badge bg-label-info me-1">Scheduled</span></td>
<td>
<div class="dropdown">
<button type="button" class="btn p-0 dropdown-toggle hide-arrow" data-bs-toggle="dropdown"><i class="bx bx-dots-vertical-rounded"></i></button>
<div class="dropdown-menu">
<a class="dropdown-item" href="javascript:void(0);"><i class="bx bx-edit-alt me-1"></i>Edit</a>
<a class="dropdown-item" href="javascript:void(0);"><i class="bx bx-trash me-1"></i>Delete</a>
</div>
</div>
</td>
</tr>
<tr>
<td><i class="fab fa-bootstrap fa-xl text-primary me-4"></i> <span>Bootstrap Project</span></td>
<td>Jerry Milton</td>
<td>
<ul class="list-unstyled users-list m-0 avatar-group d-flex align-items-center">
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" class="avatar avatar-xs pull-up" title="Lilian Fuller">
<img src="assets/img/avatars/5.png" alt="Avatar" class="rounded-circle">
</li>
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" class="avatar avatar-xs pull-up" title="Sophia Wilkerson">
<img src="assets/img/avatars/6.png" alt="Avatar" class="rounded-circle">
</li>
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" class="avatar avatar-xs pull-up" title="Christina Parker">
<img src="assets/img/avatars/7.png" alt="Avatar" class="rounded-circle">
</li>
</ul>
</td>
<td><span class="badge bg-label-warning me-1">Pending</span></td>
<td>
<div class="dropdown">
<button type="button" class="btn p-0 dropdown-toggle hide-arrow" data-bs-toggle="dropdown"><i class="bx bx-dots-vertical-rounded"></i></button>
<div class="dropdown-menu">
<a class="dropdown-item" href="javascript:void(0);"><i class="bx bx-edit-alt me-1"></i>Edit</a>
<a class="dropdown-item" href="javascript:void(0);"><i class="bx bx-trash me-1"></i>Delete</a>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>Contextual classes
Use contextual classes to color table rows or individual cells.
| Project | Client | Users | Status | Actions |
|---|---|---|---|---|
| Sketch Project | Ronnie Shane |
|
Active |
|
| React Project | Barry Hunter |
|
Completed |
|
| Angular Project | Albert Cook |
|
Active |
|
| VueJs Project | Trevor Baker |
|
Scheduled |
|
| Bootstrap Project | Jerry Milton |
|
Pending |
|
| Sketch Project | Sarah Banks |
|
Active |
|
| React Custom | Ted Richer |
|
Scheduled |
|
| Latest Bootstrap | Perry Parker |
|
Pending |
|
| Angular UI | Ana Bell |
|
Completed |
|
| Bootstrap UI | Jerry Milton |
|
Completed |
|
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th>Project</th>
<th>Client</th>
<th>Users</th>
<th>Status</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr class="table-default">
<td><i class="fab fa-sketch fa-xl text-warning me-4"></i> <span>Sketch Project</span></td>
<td>Ronnie Shane</td>
<td>
<ul class="list-unstyled users-list m-0 avatar-group d-flex align-items-center">
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" class="avatar avatar-xs pull-up" title="Lilian Fuller">
<img src="assets/img/avatars/5.png" alt="Avatar" class="rounded-circle">
</li>
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" class="avatar avatar-xs pull-up" title="Sophia Wilkerson">
<img src="assets/img/avatars/6.png" alt="Avatar" class="rounded-circle">
</li>
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" class="avatar avatar-xs pull-up" title="Christina Parker">
<img src="assets/img/avatars/7.png" alt="Avatar" class="rounded-circle">
</li>
</ul>
</td>
<td><span class="badge bg-label-primary me-1">Active</span></td>
<td>
<div class="dropdown">
<button type="button" class="btn p-0 dropdown-toggle hide-arrow" data-bs-toggle="dropdown"><i class="bx bx-dots-vertical-rounded"></i></button>
<div class="dropdown-menu">
<a class="dropdown-item" href="javascript:void(0);"><i class="bx bx-edit-alt me-1"></i>Edit</a>
<a class="dropdown-item" href="javascript:void(0);"><i class="bx bx-trash me-1"></i>Delete</a>
</div>
</div>
</td>
</tr>
<tr class="table-active">
<td><i class="fab fa-react fa-xl text-info me-4"></i> <span>React Project</span></td>
<td>Barry Hunter</td>
<td>
<ul class="list-unstyled users-list m-0 avatar-group d-flex align-items-center">
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" class="avatar avatar-xs pull-up" title="Lilian Fuller">
<img src="assets/img/avatars/5.png" alt="Avatar" class="rounded-circle">
</li>
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" class="avatar avatar-xs pull-up" title="Sophia Wilkerson">
<img src="assets/img/avatars/6.png" alt="Avatar" class="rounded-circle">
</li>
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" class="avatar avatar-xs pull-up" title="Christina Parker">
<img src="assets/img/avatars/7.png" alt="Avatar" class="rounded-circle">
</li>
</ul>
</td>
<td><span class="badge bg-label-success me-1">Completed</span></td>
<td>
<div class="dropdown">
<button type="button" class="btn p-0 dropdown-toggle hide-arrow" data-bs-toggle="dropdown"><i class="bx bx-dots-vertical-rounded"></i></button>
<div class="dropdown-menu">
<a class="dropdown-item" href="javascript:void(0);"><i class="bx bx-edit-alt me-1"></i>Edit</a>
<a class="dropdown-item" href="javascript:void(0);"><i class="bx bx-trash me-1"></i>Delete</a>
</div>
</div>
</td>
</tr>
<tr class="table-primary">
<td><i class="fab fa-angular fa-xl text-danger me-4"></i> <span>Angular Project</span></td>
<td>Albert Cook</td>
<td>
<ul class="list-unstyled users-list m-0 avatar-group d-flex align-items-center">
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" class="avatar avatar-xs pull-up" title="Lilian Fuller">
<img src="assets/img/avatars/5.png" alt="Avatar" class="rounded-circle">
</li>
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" class="avatar avatar-xs pull-up" title="Sophia Wilkerson">
<img src="assets/img/avatars/6.png" alt="Avatar" class="rounded-circle">
</li>
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" class="avatar avatar-xs pull-up" title="Christina Parker">
<img src="assets/img/avatars/7.png" alt="Avatar" class="rounded-circle">
</li>
</ul>
</td>
<td><span class="badge bg-label-primary me-1">Active</span></td>
<td>
<div class="dropdown">
<button type="button" class="btn p-0 dropdown-toggle hide-arrow" data-bs-toggle="dropdown"><i class="bx bx-dots-vertical-rounded"></i></button>
<div class="dropdown-menu">
<a class="dropdown-item" href="javascript:void(0);"><i class="bx bx-edit-alt me-1"></i>Edit</a>
<a class="dropdown-item" href="javascript:void(0);"><i class="bx bx-trash me-1"></i>Delete</a>
</div>
</div>
</td>
</tr>
<tr class="table-secondary">
<td><i class="fab fa-vuejs fa-xl text-success me-4"></i> <span>VueJs Project</span></td>
<td>Trevor Baker</td>
<td>
<ul class="list-unstyled users-list m-0 avatar-group d-flex align-items-center">
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" class="avatar avatar-xs pull-up" title="Lilian Fuller">
<img src="assets/img/avatars/5.png" alt="Avatar" class="rounded-circle">
</li>
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" class="avatar avatar-xs pull-up" title="Sophia Wilkerson">
<img src="assets/img/avatars/6.png" alt="Avatar" class="rounded-circle">
</li>
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" class="avatar avatar-xs pull-up" title="Christina Parker">
<img src="assets/img/avatars/7.png" alt="Avatar" class="rounded-circle">
</li>
</ul>
</td>
<td><span class="badge bg-label-info me-1">Scheduled</span></td>
<td>
<div class="dropdown">
<button type="button" class="btn p-0 dropdown-toggle hide-arrow" data-bs-toggle="dropdown"><i class="bx bx-dots-vertical-rounded"></i></button>
<div class="dropdown-menu">
<a class="dropdown-item" href="javascript:void(0);"><i class="bx bx-edit-alt me-1"></i>Edit</a>
<a class="dropdown-item" href="javascript:void(0);"><i class="bx bx-trash me-1"></i>Delete</a>
</div>
</div>
</td>
</tr>
<tr class="table-success">
<td><i class="fab fa-bootstrap fa-xl text-primary me-4"></i> <span>Bootstrap Project</span></td>
<td>Jerry Milton</td>
<td>
<ul class="list-unstyled users-list m-0 avatar-group d-flex align-items-center">
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" class="avatar avatar-xs pull-up" title="Lilian Fuller">
<img src="assets/img/avatars/5.png" alt="Avatar" class="rounded-circle">
</li>
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" class="avatar avatar-xs pull-up" title="Sophia Wilkerson">
<img src="assets/img/avatars/6.png" alt="Avatar" class="rounded-circle">
</li>
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" class="avatar avatar-xs pull-up" title="Christina Parker">
<img src="assets/img/avatars/7.png" alt="Avatar" class="rounded-circle">
</li>
</ul>
</td>
<td><span class="badge bg-label-warning me-1">Pending</span></td>
<td>
<div class="dropdown">
<button type="button" class="btn p-0 dropdown-toggle hide-arrow" data-bs-toggle="dropdown"><i class="bx bx-dots-vertical-rounded"></i></button>
<div class="dropdown-menu">
<a class="dropdown-item" href="javascript:void(0);"><i class="bx bx-edit-alt me-1"></i>Edit</a>
<a class="dropdown-item" href="javascript:void(0);"><i class="bx bx-trash me-1"></i>Delete</a>
</div>
</div>
</td>
</tr>
<tr class="table-danger">
<td><i class="fab fa-sketch fa-xl text-warning me-4"></i> <span>Sketch Project</span></td>
<td>Sarah Banks</td>
<td>
<ul class="list-unstyled users-list m-0 avatar-group d-flex align-items-center">
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" class="avatar avatar-xs pull-up" title="Lilian Fuller">
<img src="assets/img/avatars/5.png" alt="Avatar" class="rounded-circle">
</li>
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" class="avatar avatar-xs pull-up" title="Sophia Wilkerson">
<img src="assets/img/avatars/6.png" alt="Avatar" class="rounded-circle">
</li>
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" class="avatar avatar-xs pull-up" title="Christina Parker">
<img src="assets/img/avatars/7.png" alt="Avatar" class="rounded-circle">
</li>
</ul>
</td>
<td><span class="badge bg-label-primary me-1">Active</span></td>
<td>
<div class="dropdown">
<button type="button" class="btn p-0 dropdown-toggle hide-arrow" data-bs-toggle="dropdown"><i class="bx bx-dots-vertical-rounded"></i></button>
<div class="dropdown-menu">
<a class="dropdown-item" href="javascript:void(0);"><i class="bx bx-edit-alt me-1"></i>Edit</a>
<a class="dropdown-item" href="javascript:void(0);"><i class="bx bx-trash me-1"></i>Delete</a>
</div>
</div>
</td>
</tr>
<tr class="table-warning">
<td><i class="fab fa-react fa-xl text-info me-4"></i> <span>React Custom</span></td>
<td>Ted Richer</td>
<td>
<ul class="list-unstyled users-list m-0 avatar-group d-flex align-items-center">
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" class="avatar avatar-xs pull-up" title="Lilian Fuller">
<img src="assets/img/avatars/5.png" alt="Avatar" class="rounded-circle">
</li>
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" class="avatar avatar-xs pull-up" title="Sophia Wilkerson">
<img src="assets/img/avatars/6.png" alt="Avatar" class="rounded-circle">
</li>
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" class="avatar avatar-xs pull-up" title="Christina Parker">
<img src="assets/img/avatars/7.png" alt="Avatar" class="rounded-circle">
</li>
</ul>
</td>
<td><span class="badge bg-label-info me-1">Scheduled</span></td>
<td>
<div class="dropdown">
<button type="button" class="btn p-0 dropdown-toggle hide-arrow" data-bs-toggle="dropdown"><i class="bx bx-dots-vertical-rounded"></i></button>
<div class="dropdown-menu">
<a class="dropdown-item" href="javascript:void(0);"><i class="bx bx-edit-alt me-1"></i>Edit</a>
<a class="dropdown-item" href="javascript:void(0);"><i class="bx bx-trash me-1"></i>Delete</a>
</div>
</div>
</td>
</tr>
<tr class="table-info">
<td><i class="fab fa-bootstrap fa-xl text-primary me-4"></i> <span>Latest Bootstrap</span></td>
<td>Perry Parker</td>
<td>
<ul class="list-unstyled users-list m-0 avatar-group d-flex align-items-center">
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" class="avatar avatar-xs pull-up" title="Lilian Fuller">
<img src="assets/img/avatars/5.png" alt="Avatar" class="rounded-circle">
</li>
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" class="avatar avatar-xs pull-up" title="Sophia Wilkerson">
<img src="assets/img/avatars/6.png" alt="Avatar" class="rounded-circle">
</li>
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" class="avatar avatar-xs pull-up" title="Christina Parker">
<img src="assets/img/avatars/7.png" alt="Avatar" class="rounded-circle">
</li>
</ul>
</td>
<td><span class="badge bg-label-warning me-1">Pending</span></td>
<td>
<div class="dropdown">
<button type="button" class="btn p-0 dropdown-toggle hide-arrow" data-bs-toggle="dropdown"><i class="bx bx-dots-vertical-rounded"></i></button>
<div class="dropdown-menu">
<a class="dropdown-item" href="javascript:void(0);"><i class="bx bx-edit-alt me-1"></i>Edit</a>
<a class="dropdown-item" href="javascript:void(0);"><i class="bx bx-trash me-1"></i>Delete</a>
</div>
</div>
</td>
</tr>
<tr class="table-light">
<td><i class="fab fa-angular fa-xl text-danger me-4"></i> <span>Angular UI</span></td>
<td>Ana Bell</td>
<td>
<ul class="list-unstyled users-list m-0 avatar-group d-flex align-items-center">
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" class="avatar avatar-xs pull-up" title="Lilian Fuller">
<img src="assets/img/avatars/5.png" alt="Avatar" class="rounded-circle">
</li>
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" class="avatar avatar-xs pull-up" title="Sophia Wilkerson">
<img src="assets/img/avatars/6.png" alt="Avatar" class="rounded-circle">
</li>
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" class="avatar avatar-xs pull-up" title="Christina Parker">
<img src="assets/img/avatars/7.png" alt="Avatar" class="rounded-circle">
</li>
</ul>
</td>
<td><span class="badge bg-label-success me-1">Completed</span></td>
<td>
<div class="dropdown">
<button type="button" class="btn p-0 dropdown-toggle hide-arrow" data-bs-toggle="dropdown"><i class="bx bx-dots-vertical-rounded"></i></button>
<div class="dropdown-menu">
<a class="dropdown-item" href="javascript:void(0);"><i class="bx bx-edit-alt me-1"></i>Edit</a>
<a class="dropdown-item" href="javascript:void(0);"><i class="bx bx-trash me-1"></i>Delete</a>
</div>
</div>
</td>
</tr>
<tr class="table-dark">
<td><i class="fab fa-bootstrap fa-xl text-primary me-4"></i> <span>Bootstrap UI</span></td>
<td>Jerry Milton</td>
<td>
<ul class="list-unstyled users-list m-0 avatar-group d-flex align-items-center">
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" class="avatar avatar-xs pull-up" title="Lilian Fuller">
<img src="assets/img/avatars/5.png" alt="Avatar" class="rounded-circle">
</li>
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" class="avatar avatar-xs pull-up" title="Sophia Wilkerson">
<img src="assets/img/avatars/6.png" alt="Avatar" class="rounded-circle">
</li>
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" class="avatar avatar-xs pull-up" title="Christina Parker">
<img src="assets/img/avatars/7.png" alt="Avatar" class="rounded-circle">
</li>
</ul>
</td>
<td><span class="badge bg-label-success me-1">Completed</span></td>
<td>
<div class="dropdown">
<button type="button" class="btn p-0 dropdown-toggle hide-arrow" data-bs-toggle="dropdown"><i class="bx bx-dots-vertical-rounded"></i></button>
<div class="dropdown-menu">
<a class="dropdown-item" href="javascript:void(0);"><i class="bx bx-edit-alt me-1"></i>Edit</a>
<a class="dropdown-item" href="javascript:void(0);"><i class="bx bx-trash me-1"></i>Delete</a>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>Table Within Card
Providing example to add table inside the card. Here, we are using basic bootstrap card. If you do not want any padding outside a table, do not use .card-body inside .card.
Table within card
| Project | Client | Users | Status | Actions |
|---|---|---|---|---|
| Angular Project | Albert Cook |
|
Active |
|
| React Project | Barry Hunter |
|
Completed |
|
| VueJs Project | Trevor Baker |
|
Scheduled |
|
| Bootstrap Project | Jerry Milton |
|
Pending |
|
<div class="card">
<h5 class="card-header">Table within card</h5>
<div class="table-responsive">
<table class="table card-table">
<thead>
<tr>
<th>Project</th>
<th>Client</th>
<th>Users</th>
<th>Status</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td><i class="fab fa-angular fa-xl text-danger me-4"></i> <span>Angular Project</span></td>
<td>Albert Cook</td>
<td>
<ul class="list-unstyled users-list m-0 avatar-group d-flex align-items-center">
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" class="avatar avatar-xs pull-up" title="Lilian Fuller">
<img src="assets/img/avatars/5.png" alt="Avatar" class="rounded-circle">
</li>
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" class="avatar avatar-xs pull-up" title="Sophia Wilkerson">
<img src="assets/img/avatars/6.png" alt="Avatar" class="rounded-circle">
</li>
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" class="avatar avatar-xs pull-up" title="Christina Parker">
<img src="assets/img/avatars/7.png" alt="Avatar" class="rounded-circle">
</li>
</ul>
</td>
<td><span class="badge bg-label-primary me-1">Active</span></td>
<td>
<div class="dropdown">
<button type="button" class="btn p-0 dropdown-toggle hide-arrow" data-bs-toggle="dropdown"><i class="bx bx-dots-vertical-rounded"></i></button>
<div class="dropdown-menu">
<a class="dropdown-item" href="javascript:void(0);"><i class="bx bx-edit-alt me-1"></i>Edit</a>
<a class="dropdown-item" href="javascript:void(0);"><i class="bx bx-trash me-1"></i>Delete</a>
</div>
</div>
</td>
</tr>
<tr>
<td><i class="fab fa-react fa-xl text-info me-4"></i> <span>React Project</span></td>
<td>Barry Hunter</td>
<td>
<ul class="list-unstyled users-list m-0 avatar-group d-flex align-items-center">
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" class="avatar avatar-xs pull-up" title="Lilian Fuller">
<img src="assets/img/avatars/5.png" alt="Avatar" class="rounded-circle">
</li>
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" class="avatar avatar-xs pull-up" title="Sophia Wilkerson">
<img src="assets/img/avatars/6.png" alt="Avatar" class="rounded-circle">
</li>
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" class="avatar avatar-xs pull-up" title="Christina Parker">
<img src="assets/img/avatars/7.png" alt="Avatar" class="rounded-circle">
</li>
</ul>
</td>
<td><span class="badge bg-label-success me-1">Completed</span></td>
<td>
<div class="dropdown">
<button type="button" class="btn p-0 dropdown-toggle hide-arrow" data-bs-toggle="dropdown"><i class="bx bx-dots-vertical-rounded"></i></button>
<div class="dropdown-menu">
<a class="dropdown-item" href="javascript:void(0);"><i class="bx bx-edit-alt me-1"></i>Edit</a>
<a class="dropdown-item" href="javascript:void(0);"><i class="bx bx-trash me-1"></i>Delete</a>
</div>
</div>
</td>
</tr>
<tr>
<td><i class="fab fa-vuejs fa-xl text-success me-4"></i> <span>VueJs Project</span></td>
<td>Trevor Baker</td>
<td>
<ul class="list-unstyled users-list m-0 avatar-group d-flex align-items-center">
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" class="avatar avatar-xs pull-up" title="Lilian Fuller">
<img src="assets/img/avatars/5.png" alt="Avatar" class="rounded-circle">
</li>
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" class="avatar avatar-xs pull-up" title="Sophia Wilkerson">
<img src="assets/img/avatars/6.png" alt="Avatar" class="rounded-circle">
</li>
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" class="avatar avatar-xs pull-up" title="Christina Parker">
<img src="assets/img/avatars/7.png" alt="Avatar" class="rounded-circle">
</li>
</ul>
</td>
<td><span class="badge bg-label-info me-1">Scheduled</span></td>
<td>
<div class="dropdown">
<button type="button" class="btn p-0 dropdown-toggle hide-arrow" data-bs-toggle="dropdown"><i class="bx bx-dots-vertical-rounded"></i></button>
<div class="dropdown-menu">
<a class="dropdown-item" href="javascript:void(0);"><i class="bx bx-edit-alt me-1"></i>Edit</a>
<a class="dropdown-item" href="javascript:void(0);"><i class="bx bx-trash me-1"></i>Delete</a>
</div>
</div>
</td>
</tr>
<tr>
<td><i class="fab fa-bootstrap fa-xl text-primary me-4"></i> <span>Bootstrap Project</span></td>
<td>Jerry Milton</td>
<td>
<ul class="list-unstyled users-list m-0 avatar-group d-flex align-items-center">
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" class="avatar avatar-xs pull-up" title="Lilian Fuller">
<img src="assets/img/avatars/5.png" alt="Avatar" class="rounded-circle">
</li>
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" class="avatar avatar-xs pull-up" title="Sophia Wilkerson">
<img src="assets/img/avatars/6.png" alt="Avatar" class="rounded-circle">
</li>
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" class="avatar avatar-xs pull-up" title="Christina Parker">
<img src="assets/img/avatars/7.png" alt="Avatar" class="rounded-circle">
</li>
</ul>
</td>
<td><span class="badge bg-label-warning me-1">Pending</span></td>
<td>
<div class="dropdown">
<button type="button" class="btn p-0 dropdown-toggle hide-arrow" data-bs-toggle="dropdown"><i class="bx bx-dots-vertical-rounded"></i></button>
<div class="dropdown-menu">
<a class="dropdown-item" href="javascript:void(0);"><i class="bx bx-edit-alt me-1"></i>Edit</a>
<a class="dropdown-item" href="javascript:void(0);"><i class="bx bx-trash me-1"></i>Delete</a>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>Responsive tables
Responsive tables allow tables to be scrolled horizontally with ease. Make any table responsive across all viewports by wrapping a .table with .table-responsive. Or, pick a maximum breakpoint with which to have a responsive table up to by using .table-responsive-{sm|md|lg|xl|xxl}.
Across every breakpoint, use .table-responsive for horizontally scrolling tables.
| # | Table heading | Table heading | Table heading | Table heading | Table heading | Table heading |
|---|---|---|---|---|---|---|
| 1 | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell |
| 2 | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell |
| 3 | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell |
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th>#</th>
<th>Table heading</th>
<th>Table heading</th>
<th>Table heading</th>
<th>Table heading</th>
<th>Table heading</th>
<th>Table heading</th>
</tr>
</thead>
<tbody class="table-border-bottom-0">
<tr>
<th scope="row">1</th>
<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>
<th scope="row">2</th>
<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>
<th scope="row">3</th>
<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>