Bootstrap Tables
Bootstrap Tables are designed to be opt-in due to the widespread use of tables across third-party widgets like calendars and date pickers. Keep reading some Bootstrap Tables examples to see how these tables work.
Examples
Author
Function
Technology
Employed
Manager
Organization
Online
23/04/18
Edit
Programator
Developer
Offline
11/01/19
Edit
Executive
Projects
Online
19/09/17
Edit
Programator
Developer
Online
24/12/08
Edit
Manager
Executive
Offline
04/10/21
Edit
Programtor
Developer
Offline
14/09/20
Edit
<div class= "card" >
<div class= "table-responsive" >
<table class= "table align-items-center mb-0" >
<thead>
<tr>
<th class= "text-uppercase text-secondary text-xxs font-weight-bolder opacity-7" > Author</th>
<th class= "text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 ps-2" > Function</th>
<th class= "text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7" > Technology</th>
<th class= "text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7" > Employed</th>
<th class= "text-secondary opacity-7" ></th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class= "d-flex px-2 py-1" >
<div>
<img src= "https://demos.creative-tim.com/test/material-dashboard-pro/assets/img/team-2.jpg" class= "avatar avatar-sm me-3" >
</div>
<div class= "d-flex flex-column justify-content-center" >
<h6 class= "mb-0 text-xs" > John Michael</h6>
<p class= "text-xs text-secondary mb-0" > [email protected] </p>
</div>
</div>
</td>
<td>
<p class= "text-xs font-weight-bold mb-0" > Manager</p>
<p class= "text-xs text-secondary mb-0" > Organization</p>
</td>
<td class= "align-middle text-center text-sm" >
<span class= "badge badge-sm badge-success" > Online</span>
</td>
<td class= "align-middle text-center" >
<span class= "text-secondary text-xs font-weight-normal" > 23/04/18</span>
</td>
<td class= "align-middle" >
<a href= "javascript:;" class= "text-secondary font-weight-normal text-xs" data-toggle= "tooltip" data-original-title= "Edit user" >
Edit
</a>
</td>
</tr>
<tr>
<td>
<div class= "d-flex px-2 py-1" >
<div>
<img src= "https://demos.creative-tim.com/test/material-dashboard-pro/assets/img/team-3.jpg" class= "avatar avatar-sm me-3" >
</div>
<div class= "d-flex flex-column justify-content-center" >
<h6 class= "mb-0 text-xs" > Alexa Liras</h6>
<p class= "text-xs text-secondary mb-0" > [email protected] </p>
</div>
</div>
</td>
<td>
<p class= "text-xs font-weight-bold mb-0" > Programator</p>
<p class= "text-xs text-secondary mb-0" > Developer</p>
</td>
<td class= "align-middle text-center text-sm" >
<span class= "badge badge-sm badge-secondary" > Offline</span>
</td>
<td class= "align-middle text-center" >
<span class= "text-secondary text-xs font-weight-normal" > 11/01/19</span>
</td>
<td class= "align-middle" >
<a href= "#!" class= "text-secondary font-weight-normal text-xs" data-toggle= "tooltip" data-original-title= "Edit user" >
Edit
</a>
</td>
</tr>
<tr>
<td>
<div class= "d-flex px-2 py-1" >
<div>
<img src= "https://demos.creative-tim.com/test/material-dashboard-pro/assets/img/team-4.jpg" class= "avatar avatar-sm me-3" >
</div>
<div class= "d-flex flex-column justify-content-center" >
<h6 class= "mb-0 text-xs" > Laurent Perrier</h6>
<p class= "text-xs text-secondary mb-0" > [email protected] </p>
</div>
</div>
</td>
<td>
<p class= "text-xs font-weight-bold mb-0" > Executive</p>
<p class= "text-xs text-secondary mb-0" > Projects</p>
</td>
<td class= "align-middle text-center text-sm" >
<span class= "badge badge-sm badge-success" > Online</span>
</td>
<td class= "align-middle text-center" >
<span class= "text-secondary text-xs font-weight-normal" > 19/09/17</span>
</td>
<td class= "align-middle" >
<a href= "#!" class= "text-secondary font-weight-normal text-xs" data-toggle= "tooltip" data-original-title= "Edit user" >
Edit
</a>
</td>
</tr>
<tr>
<td>
<div class= "d-flex px-2 py-1" >
<div>
<img src= "https://demos.creative-tim.com/test/material-dashboard-pro/assets/img/team-3.jpg" class= "avatar avatar-sm me-3" >
</div>
<div class= "d-flex flex-column justify-content-center" >
<h6 class= "mb-0 text-xs" > Michael Levi</h6>
<p class= "text-xs text-secondary mb-0" > [email protected] </p>
</div>
</div>
</td>
<td>
<p class= "text-xs font-weight-bold mb-0" > Programator</p>
<p class= "text-xs text-secondary mb-0" > Developer</p>
</td>
<td class= "align-middle text-center text-sm" >
<span class= "badge badge-sm badge-success" > Online</span>
</td>
<td class= "align-middle text-center" >
<span class= "text-secondary text-xs font-weight-normal" > 24/12/08</span>
</td>
<td class= "align-middle" >
<a href= "#!" class= "text-secondary font-weight-normal text-xs" data-toggle= "tooltip" data-original-title= "Edit user" >
Edit
</a>
</td>
</tr>
<tr>
<td>
<div class= "d-flex px-2 py-1" >
<div>
<img src= "https://demos.creative-tim.com/test/material-dashboard-pro/assets/img/team-2.jpg" class= "avatar avatar-sm me-3" >
</div>
<div class= "d-flex flex-column justify-content-center" >
<h6 class= "mb-0 text-xs" > Richard Gran</h6>
<p class= "text-xs text-secondary mb-0" > [email protected] </p>
</div>
</div>
</td>
<td>
<p class= "text-xs font-weight-bold mb-0" > Manager</p>
<p class= "text-xs text-secondary mb-0" > Executive</p>
</td>
<td class= "align-middle text-center text-sm" >
<span class= "badge badge-sm badge-secondary" > Offline</span>
</td>
<td class= "align-middle text-center" >
<span class= "text-secondary text-xs font-weight-normal" > 04/10/21</span>
</td>
<td class= "align-middle" >
<a href= "#!" class= "text-secondary font-weight-normal text-xs" data-toggle= "tooltip" data-original-title= "Edit user" >
Edit
</a>
</td>
</tr>
<tr>
<td>
<div class= "d-flex px-2 py-1" >
<div>
<img src= "https://demos.creative-tim.com/test/material-dashboard-pro/assets/img/team-4.jpg" class= "avatar avatar-sm me-3" >
</div>
<div class= "d-flex flex-column justify-content-center" >
<h6 class= "mb-0 text-xs" > Miriam Eric</h6>
<p class= "text-xs text-secondary mb-0" > [email protected] </p>
</div>
</div>
</td>
<td>
<p class= "text-xs font-weight-bold mb-0" > Programtor</p>
<p class= "text-xs text-secondary mb-0" > Developer</p>
</td>
<td class= "align-middle text-center text-sm" >
<span class= "badge badge-sm badge-secondary" > Offline</span>
</td>
<td class= "align-middle text-center" >
<span class= "text-secondary text-xs font-weight-normal" > 14/09/20</span>
</td>
<td class= "align-middle" >
<a href= "#!" class= "text-secondary font-weight-normal text-xs" data-toggle= "tooltip" data-original-title= "Edit user" >
Edit
</a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
Project Table
Project
Budget
Status
Completion
$2,500
working
60%
more_vert
$5,000
done
100%
more_vert
$3,400
canceled
30%
more_vert
$1,000
canceled
0%
more_vert
$14,000
working
80%
more_vert
$2,300
done
100%
more_vert
<div class= "card" >
<div class= "table-responsive" >
<table class= "table align-items-center mb-0" >
<thead>
<tr>
<th class= "text-uppercase text-secondary text-xxs font-weight-bolder opacity-7" > Project</th>
<th class= "text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 ps-2" > Budget</th>
<th class= "text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 ps-2" > Status</th>
<th class= "text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 ps-2" > Completion</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class= "d-flex px-2" >
<div>
<img src= "https://demos.creative-tim.com/soft-ui-design-system-pro/assets/img/logos/small-logos/logo-spotify.svg" class= "avatar avatar-sm rounded-circle me-2" >
</div>
<div class= "my-auto" >
<h6 class= "mb-0 text-xs" > Spotify</h6>
</div>
</div>
</td>
<td>
<p class= "text-xs font-weight-normal mb-0" > $2,500</p>
</td>
<td>
<span class= "badge badge-dot me-4" >
<i class= "bg-info" ></i>
<span class= "text-dark text-xs" > working</span>
</span>
</td>
<td class= "align-middle text-center" >
<div class= "d-flex align-items-center" >
<span class= "me-2 text-xs" > 60%</span>
</div>
</td>
<td class= "align-middle" >
<button class= "btn btn-link text-secondary mb-0" >
<span class= "material-icons" >
more_vert
</span>
</button>
</td>
</tr>
<tr>
<td>
<div class= "d-flex px-2" >
<div>
<img src= "https://demos.creative-tim.com/soft-ui-design-system-pro/assets/img/logos/small-logos/logo-invision.svg" class= "avatar avatar-sm rounded-circle me-2" >
</div>
<div class= "my-auto" >
<h6 class= "mb-0 text-xs" > Invision</h6>
</div>
</div>
</td>
<td>
<p class= "text-xs font-weight-normal mb-0" > $5,000</p>
</td>
<td>
<span class= "badge badge-dot me-4" >
<i class= "bg-success" ></i>
<span class= "text-dark text-xs" > done</span>
</span>
</td>
<td class= "align-middle text-center" >
<div class= "d-flex align-items-center" >
<span class= "me-2 text-xs" > 100%</span>
</div>
</td>
<td class= "align-middle" >
<button class= "btn btn-link text-secondary mb-0" aria-haspopup= "true" aria-expanded= "false" >
<span class= "material-icons" >
more_vert
</span>
</button>
</td>
</tr>
<tr>
<td>
<div class= "d-flex px-2" >
<div>
<img src= "https://demos.creative-tim.com/soft-ui-design-system-pro/assets/img/logos/small-logos/logo-jira.svg" class= "avatar avatar-sm rounded-circle me-2" >
</div>
<div class= "my-auto" >
<h6 class= "mb-0 text-xs" > Jira</h6>
</div>
</div>
</td>
<td>
<p class= "text-xs font-weight-normal mb-0" > $3,400</p>
</td>
<td>
<span class= "badge badge-dot me-4" >
<i class= "bg-danger" ></i>
<span class= "text-dark text-xs" > canceled</span>
</span>
</td>
<td class= "align-middle text-center" >
<div class= "d-flex align-items-center" >
<span class= "me-2 text-xs" > 30%</span>
</div>
</td>
<td class= "align-middle" >
<button class= "btn btn-link text-secondary mb-0" aria-haspopup= "true" aria-expanded= "false" >
<span class= "material-icons" >
more_vert
</span>
</button>
</td>
</tr>
<tr>
<td>
<div class= "d-flex px-2" >
<div>
<img src= "https://demos.creative-tim.com/soft-ui-design-system-pro/assets/img/logos/small-logos/logo-slack.svg" class= "avatar avatar-sm rounded-circle me-2" >
</div>
<div class= "my-auto" >
<h6 class= "mb-0 text-xs" > Slack</h6>
</div>
</div>
</td>
<td>
<p class= "text-xs font-weight-normal mb-0" > $1,000</p>
</td>
<td>
<span class= "badge badge-dot me-4" >
<i class= "bg-danger" ></i>
<span class= "text-dark text-xs" > canceled</span>
</span>
</td>
<td class= "align-middle text-center" >
<div class= "d-flex align-items-center" >
<span class= "me-2 text-xs" > 0%</span>
</div>
</td>
<td class= "align-middle" >
<button class= "btn btn-link text-secondary mb-0" aria-haspopup= "true" aria-expanded= "false" >
<span class= "material-icons" >
more_vert
</span>
</button>
</td>
</tr>
<tr>
<td>
<div class= "d-flex px-2" >
<div>
<img src= "https://demos.creative-tim.com/soft-ui-design-system-pro/assets/img/logos/small-logos/logo-webdev.svg" class= "avatar avatar-sm rounded-circle me-2" >
</div>
<div class= "my-auto" >
<h6 class= "mb-0 text-xs" > Webdev</h6>
</div>
</div>
</td>
<td>
<p class= "text-xs font-weight-normal mb-0" > $14,000</p>
</td>
<td>
<span class= "badge badge-dot me-4" >
<i class= "bg-info" ></i>
<span class= "text-dark text-xs" > working</span>
</span>
</td>
<td class= "align-middle text-center" >
<div class= "d-flex align-items-center" >
<span class= "me-2 text-xs" > 80%</span>
</div>
</td>
<td class= "align-middle" >
<button class= "btn btn-link text-secondary mb-0" aria-haspopup= "true" aria-expanded= "false" >
<span class= "material-icons" >
more_vert
</span>
</button>
</td>
</tr>
<tr>
<td>
<div class= "d-flex px-2" >
<div>
<img src= "https://demos.creative-tim.com/soft-ui-design-system-pro/assets/img/logos/small-logos/logo-xd.svg" class= "avatar avatar-sm rounded-circle me-2" >
</div>
<div class= "my-auto" >
<h6 class= "mb-0 text-xs" > Adobe XD</h6>
</div>
</div>
</td>
<td>
<p class= "text-xs font-weight-normal mb-0" > $2,300</p>
</td>
<td>
<span class= "badge badge-dot me-4" >
<i class= "bg-success" ></i>
<span class= "text-dark text-xs" > done</span>
</span>
</td>
<td class= "align-middle text-center" >
<div class= "d-flex align-items-center" >
<span class= "me-2 text-xs" > 100%</span>
</div>
</td>
<td class= "align-middle" >
<button class= "btn btn-link text-secondary mb-0" aria-haspopup= "true" aria-expanded= "false" >
<span class= "material-icons" >
more_vert
</span>
</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>