Tables
Documentation and examples for opt-in styling of tables (given their prevalent use in JavaScript plugins) with Bootstrap.
Examples
| # | Client | Amount | Date | Status |
|---|---|---|---|---|
| 1 |
Monica
|
$9.00 | 05 May | Rejected |
| 2 |
Jacob
|
$257.93 | 12 May | Completed |
| 3 |
Conor
|
$441.99 | 15 May | Completed |
| 4 |
Victoria
|
$84.01 | 27 May | Pending |
<table class="table table-light">
<thead>
<tr>
<th scope="col" style="width: 8%;">#</th>
<th scope="col">Client</th>
<th scope="col">Amount</th>
<th scope="col">Date</th>
<th scope="col">Status</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">
<span class="icon icon-xs icon-soft-secondary icon-circle mr-2">
<span class="icon-inner">1</span>
</span>
</th>
<td class="align-middle">
<div class="media align-items-center">
<span class="avatar avatar-xs mr-2">
<img class="img-fluid rounded-circle" src="../../assets/img/32x32/img3.jpg" alt="Image Description">
</span>
<span>Monica</span>
</div>
</td>
<td class="align-middle text-primary">$9.00</td>
<td class="align-middle text-body">05 May</td>
<td class="align-middle">
<span class="badge badge-danger">Rejected</span>
</td>
</tr>
<tr>
<th scope="row">
<span class="icon icon-xs icon-soft-secondary icon-circle mr-2">
<span class="icon-inner">2</span>
</span>
</th>
<td class="align-middle">
<div class="media align-items-center">
<span class="avatar avatar-xs mr-2">
<img class="img-fluid rounded-circle" src="../../assets/img/32x32/img9.jpg" alt="Image Description">
</span>
<span>Jacob</span>
</div>
</td>
<td class="align-middle text-primary">$257.93</td>
<td class="align-middle text-body">12 May</td>
<td class="align-middle">
<span class="badge badge-success">Completed</span>
</td>
</tr>
<tr>
<th scope="row">
<span class="icon icon-xs icon-soft-secondary icon-circle mr-2">
<span class="icon-inner">3</span>
</span>
</th>
<td class="align-middle">
<div class="media align-items-center">
<span class="avatar avatar-xs mr-2">
<img class="img-fluid rounded-circle" src="../../assets/img/32x32/img8.jpg" alt="Image Description">
</span>
<span>Conor</span>
</div>
</td>
<td class="align-middle text-primary">$441.99</td>
<td class="align-middle text-body">15 May</td>
<td class="align-middle">
<span class="badge badge-success">Completed</span>
</td>
</tr>
<tr>
<th scope="row">
<span class="icon icon-xs icon-soft-secondary icon-circle mr-2">
<span class="icon-inner">3</span>
</span>
</th>
<td class="align-middle">
<div class="media align-items-center">
<span class="avatar avatar-xs mr-2">
<img class="img-fluid rounded-circle" src="../../assets/img/32x32/img5.jpg" alt="Image Description">
</span>
<span>Victoria</span>
</div>
</td>
<td class="align-middle text-primary">$84.01</td>
<td class="align-middle text-body">27 May</td>
<td class="align-middle">
<span class="badge badge-warning">Pending</span>
</td>
</tr>
</tbody>
</table>
<table class="table table-light">
<thead>
<tr>
<th scope="col">Event</th>
<th scope="col">Date</th>
<th scope="col">Location</th>
<th scope="col">Seats</th>
<th scope="col">Attending</th>
<th scope="col"></th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row" class="align-middle">
<div class="custom-control custom-checkbox d-flex align-items-center text-primary font-weight-medium">
<input type="checkbox" class="custom-control-input" id="eventCheckbox01">
<label class="custom-control-label" for="eventCheckbox01">Webinar</label>
</div>
</th>
<td class="align-middle text-body">
<small class="d-block">25 Aug, 2018</small>
<small class="d-block">12PM - 01AM</small>
</td>
<td class="align-middle text-body">
<small class="d-block">728 Dooley Branch,<br>Beckershire, LA 63598-2909</small>
</td>
<td class="align-middle text-body small">
<i class="fas fa-chair mr-2"></i>
98 of 200
</td>
<td class="align-middle">
<button type="button" class="btn btn-xs btn-icon btn-soft-primary transition-3d-hover">
<i class="fas fa-check"></i>
</button>
<button type="button" class="btn btn-xs btn-icon btn-soft-danger transition-3d-hover">
<i class="fas fa-times"></i>
</button>
</td>
<td class="align-middle text-body">
<a class="btn btn-xs btn-icon btn-soft-secondary transition-3d-hover" href="javascript:;" data-toggle="tooltip" data-placement="top" title="Edit">
<i class="fas fa-pen"></i>
</a>
</td>
</tr>
<tr>
<th scope="row" class="align-middle">
<div class="custom-control custom-checkbox d-flex align-items-center text-primary font-weight-medium">
<input type="checkbox" class="custom-control-input" id="eventCheckbox02" checked>
<label class="custom-control-label" for="eventCheckbox02">Slack conference</label>
</div>
</th>
<td class="align-middle text-body">
<small class="d-block">31 Aug, 2018</small>
<small class="d-block">06AM - 06:30AM</small>
</td>
<td class="align-middle text-body">
<small class="d-block">622 Dixie Path,<br>South Tobinchester, UT 98336</small>
</td>
<td class="align-middle text-body small">
<i class="fas fa-chair mr-2"></i>
7 of 20
</td>
<td class="align-middle">
<button type="button" class="btn btn-xs btn-icon btn-primary">
<i class="fas fa-check"></i>
</button>
<button type="button" class="btn btn-xs btn-icon btn-soft-danger" disabled>
<i class="fas fa-times"></i>
</button>
</td>
<td class="align-middle text-body">
<a class="btn btn-xs btn-icon btn-soft-secondary transition-3d-hover" href="javascript:;" data-toggle="tooltip" data-placement="top" title="Edit">
<i class="fas fa-pen"></i>
</a>
</td>
</tr>
<tr>
<th scope="row" class="align-middle">
<div class="custom-control custom-checkbox d-flex align-items-center text-primary font-weight-medium">
<input type="checkbox" class="custom-control-input" id="eventCheckbox03" checked>
<label class="custom-control-label" for="eventCheckbox03">Dropbox</label>
</div>
</th>
<td class="align-middle text-body">
<small class="d-block">04 Sep, 2018</small>
<small class="d-block">03PM - 05AM</small>
</td>
<td class="align-middle text-body">
<small class="d-block">153 Williamson Plaza,<br>Maggieberg, MT 09514</small>
</td>
<td class="align-middle text-body small">
<i class="fas fa-chair mr-2"></i>
41 of 74
</td>
<td class="align-middle">
<button type="button" class="btn btn-xs btn-icon btn-primary">
<i class="fas fa-check"></i>
</button>
<button type="button" class="btn btn-xs btn-icon btn-soft-danger" disabled>
<i class="fas fa-times"></i>
</button>
</td>
<td class="align-middle text-body">
<a class="btn btn-xs btn-icon btn-soft-secondary transition-3d-hover" href="javascript:;" data-toggle="tooltip" data-placement="top" title="Edit">
<i class="fas fa-pen"></i>
</a>
</td>
</tr>
<tr>
<th scope="row" class="align-middle">
<div class="custom-control custom-checkbox d-flex align-items-center text-primary font-weight-medium">
<input type="checkbox" class="custom-control-input" id="eventCheckbox04">
<label class="custom-control-label" for="eventCheckbox04">InVision live</label>
</div>
</th>
<td class="align-middle text-body">
<small class="d-block">11 Sep, 2018</small>
<small class="d-block">02PM - 03AM</small>
</td>
<td class="align-middle text-body">
<small class="d-block">5078 Jensen Key,<br>Port Kaya, WV 73505</small>
</td>
<td class="align-middle text-body small">
<i class="fas fa-chair mr-2"></i>
55 of 155
</td>
<td class="align-middle">
<button type="button" class="btn btn-xs btn-icon btn-soft-primary transition-3d-hover">
<i class="fas fa-check"></i>
</button>
<button type="button" class="btn btn-xs btn-icon btn-soft-danger transition-3d-hover">
<i class="fas fa-times"></i>
</button>
</td>
<td class="align-middle text-body">
<a class="btn btn-xs btn-icon btn-soft-secondary transition-3d-hover" href="javascript:;" data-toggle="tooltip" data-placement="top" title="Edit">
<i class="fas fa-pen"></i>
</a>
</td>
</tr>
</tbody>
</table>
| Task | Project | Priority | Due date | Status |
|---|---|---|---|---|
| Home page redesign | Spotify | Highest | 25 Jul | In progress |
| Logo branding | Dropbox | Medium | 12 Aug | In progress |
| Website redesign | High | 15 Aug | Completed | |
| Home page redesign | FrontApp | Medium | 01 Aug | Completed |
| SEO optimization | Slack | Lowest | 02 Aug | On hold |
| Branding | Spotify | High | 05 Sep | In progress |
| Logo redesign | Htmlstream | High | 15 Sep | Completed |
| Website redesign | GitHub | Low | 16 Sep | On hold |
<table class="table table-light">
<thead>
<tr>
<th scope="col">Task</th>
<th scope="col">Project</th>
<th scope="col">Priority</th>
<th scope="col">Due date</th>
<th scope="col">Status</th>
<th scope="col"></th>
</tr>
</thead>
<tbody class="font-size-1">
<tr>
<td class="align-middle">Home page redesign</td>
<td class="align-middle">Spotify</td>
<td class="align-middle text-danger">
<i class="fas fa-arrow-up mr-1"></i>
Highest
</td>
<td class="align-middle">25 Jul</td>
<td class="align-middle">
<i class="fas fa-circle text-primary small mr-1"></i>
In progress
</td>
</tr>
<tr>
<td class="align-middle">Logo branding</td>
<td class="align-middle">Dropbox</td>
<td class="align-middle text-warning">
<i class="fas fa-arrow-up mr-1"></i>
Medium
</td>
<td class="align-middle">12 Aug</td>
<td class="align-middle">
<i class="fas fa-circle text-primary small mr-1"></i>
In progress
</td>
</tr>
<tr>
<td class="align-middle">Website redesign</td>
<td class="align-middle">Google</td>
<td class="align-middle text-danger">
<i class="fas fa-arrow-up mr-1"></i>
High
</td>
<td class="align-middle">15 Aug</td>
<td class="align-middle">
<i class="fas fa-circle text-success small mr-1"></i>
Completed
</td>
</tr>
<tr>
<td class="align-middle">Home page redesign</td>
<td class="align-middle">FrontApp</td>
<td class="align-middle text-warning">
<i class="fas fa-arrow-up mr-1"></i>
Medium
</td>
<td class="align-middle">01 Aug</td>
<td class="align-middle">
<i class="fas fa-circle text-success small mr-1"></i>
Completed
</td>
</tr>
<tr>
<td class="align-middle">SEO optimization</td>
<td class="align-middle">Slack</td>
<td class="align-middle text-success">
<i class="fas fa-arrow-down mr-1"></i>
Lowest
</td>
<td class="align-middle">02 Aug</td>
<td class="align-middle">
<i class="fas fa-circle text-warning small mr-1"></i>
On hold
</td>
</tr>
<tr>
<td class="align-middle">Branding</td>
<td class="align-middle">Spotify</td>
<td class="align-middle text-danger">
<i class="fas fa-arrow-up mr-1"></i>
High
</td>
<td class="align-middle">05 Sep</td>
<td class="align-middle">
<i class="fas fa-circle text-primary small mr-1"></i>
In progress
</td>
</tr>
<tr>
<td class="align-middle">Logo redesign</td>
<td class="align-middle">Htmlstream</td>
<td class="align-middle text-danger">
<i class="fas fa-arrow-up mr-1"></i>
High
</td>
<td class="align-middle">15 Sep</td>
<td class="align-middle">
<i class="fas fa-circle text-success small mr-1"></i>
Completed
</td>
</tr>
<tr>
<td class="align-middle">Website redesign</td>
<td class="align-middle">GitHub</td>
<td class="align-middle text-success">
<i class="fas fa-arrow-down mr-1"></i>
Low
</td>
<td class="align-middle">16 Sep</td>
<td class="align-middle">
<i class="fas fa-circle text-warning small mr-1"></i>
On hold
</td>
</tr>
</tbody>
</table>