Tables
Documentation and examples for opt-in styling of tables (given their prevalent use in JavaScript plugins) with Purpose.
Bootstrap DocumentationBasic
Due to the widespread use of tables across third-party widgets like calendars and date pickers, 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.
Using the most basic table markup, here’s how .table-based tables look in Bootstrap. All table styles are inherited in Bootstrap 4, meaning any nested tables will be styled in the same manner as the parent.
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird |
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>You can also invert the colors—with light text on dark backgrounds—with .table-dark.
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird |
<table class="table table-dark">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>Cards
Purpose comes with an alternative style for tables. Use .table-cards applied on the main table and the .table-divider applied on a <tr> element to achieve this modern look.
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 1 | Mark | Otto | @mdo |
| 1 | Mark | Otto | @mdo |
| 1 | Mark | Otto | @mdo |
| 1 | Mark | Otto | @mdo |
Examples
Projects
<div class="table-responsive">
<table class="table table-cards align-items-center">
<thead>
<tr>
<th scope="col" class="sort" data-sort="name">Project</th>
<th scope="col" class="sort" data-sort="budget">Budget</th>
<th scope="col" class="sort" data-sort="status">Status</th>
<th scope="col">Users</th>
<th scope="col" class="sort" data-sort="completion">Completion</th>
<th scope="col"></th>
</tr>
</thead>
<tbody class="list">
<tr>
<th scope="row">
<div class="media align-items-center">
<div>
<img alt="Image placeholder" src="../../assets/img/theme/light/brand-avatar-1.png" class="avatar rounded-circle">
</div>
<div class="media-body ml-4">
<span class="name mb-0 text-sm">Purpose Design System</span>
</div>
</div>
</th>
<td class="budget">
$2500 USD
</td>
<td>
<span class="badge badge-dot mr-4">
<i class="bg-warning"></i>
<span class="status">pending</span>
</span>
</td>
<td>
<div class="avatar-group">
<a href="#" class="avatar rounded-circle avatar-sm">
<img alt="Image placeholder" src="../../assets/img/theme/light/team-1-800x800.jpg" class="">
</a>
<a href="#" class="avatar rounded-circle avatar-sm">
<img alt="Image placeholder" src="../../assets/img/theme/light/team-2-800x800.jpg" class="">
</a>
<a href="#" class="avatar rounded-circle avatar-sm">
<img alt="Image placeholder" src="../../assets/img/theme/light/team-3-800x800.jpg" class="">
</a>
</div>
</td>
<td>
<div class="d-flex align-items-center">
<span class="completion mr-2">60%</span>
<div>
<div class="progress">
<div class="progress-bar bg-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"></div>
</div>
</div>
</div>
</td>
<td class="text-right">
<!-- Actions -->
<div class="actions ml-3">
<a href="#" class="action-item mr-2" data-toggle="tooltip" title="Quick view">
<i class="fas fa-external-link-alt"></i>
</a>
<a href="#" class="action-item mr-2" data-toggle="tooltip" title="Edit">
<i class="fas fa-pencil-alt"></i>
</a>
<a href="#" class="action-item text-danger mr-2" data-toggle="tooltip" title="Move to trash">
<i class="fas fa-trash"></i>
</a>
</div>
</td>
</tr>
<tr class="table-divider"></tr>
<tr>
<th scope="row">
<div class="media align-items-center">
<div>
<img alt="Image placeholder" src="../../assets/img/theme/light/brand-avatar-2.png" class="avatar rounded-circle">
</div>
<div class="media-body ml-4">
<span class="name mb-0 text-sm">Website redesign</span>
</div>
</div>
</th>
<td class="budget">
$1800 USD
</td>
<td>
<span class="badge badge-dot mr-4">
<i class="bg-success"></i>
<span class="status">completed</span>
</span>
</td>
<td>
<div class="avatar-group">
<a href="#" class="avatar rounded-circle avatar-sm">
<img alt="Image placeholder" src="../../assets/img/theme/light/team-1-800x800.jpg" class="">
</a>
<a href="#" class="avatar rounded-circle avatar-sm">
<img alt="Image placeholder" src="../../assets/img/theme/light/team-2-800x800.jpg" class="">
</a>
<a href="#" class="avatar rounded-circle avatar-sm">
<img alt="Image placeholder" src="../../assets/img/theme/light/team-3-800x800.jpg" class="">
</a>
</div>
</td>
<td>
<div class="d-flex align-items-center">
<span class="completion mr-2">100%</span>
<div>
<div class="progress">
<div class="progress-bar bg-success" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%;"></div>
</div>
</div>
</div>
</td>
<td class="text-right">
<!-- Actions -->
<div class="actions ml-3">
<a href="#" class="action-item mr-2" data-toggle="tooltip" title="Quick view">
<i class="fas fa-external-link-alt"></i>
</a>
<a href="#" class="action-item mr-2" data-toggle="tooltip" title="Edit">
<i class="fas fa-pencil-alt"></i>
</a>
<a href="#" class="action-item text-danger mr-2" data-toggle="tooltip" title="Move to trash">
<i class="fas fa-trash"></i>
</a>
</div>
</td>
</tr>
<tr class="table-divider"></tr>
<tr>
<th scope="row">
<div class="media align-items-center">
<div>
<img alt="Image placeholder" src="../../assets/img/theme/light/brand-avatar-3.png" class="avatar rounded-circle">
</div>
<div class="media-body ml-4">
<span class="name mb-0 text-sm">Webpixels website launch</span>
</div>
</div>
</th>
<td class="budget">
$3150 USD
</td>
<td>
<span class="badge badge-dot mr-4">
<i class="bg-danger"></i>
<span class="status">delayed</span>
</span>
</td>
<td>
<div class="avatar-group">
<a href="#" class="avatar rounded-circle avatar-sm">
<img alt="Image placeholder" src="../../assets/img/theme/light/team-1-800x800.jpg" class="">
</a>
<a href="#" class="avatar rounded-circle avatar-sm">
<img alt="Image placeholder" src="../../assets/img/theme/light/team-2-800x800.jpg" class="">
</a>
<a href="#" class="avatar rounded-circle avatar-sm">
<img alt="Image placeholder" src="../../assets/img/theme/light/team-3-800x800.jpg" class="">
</a>
</div>
</td>
<td>
<div class="d-flex align-items-center">
<span class="completion mr-2">72%</span>
<div>
<div class="progress">
<div class="progress-bar bg-danger" role="progressbar" aria-valuenow="72" aria-valuemin="0" aria-valuemax="100" style="width: 72%;"></div>
</div>
</div>
</div>
</td>
<td class="text-right">
<!-- Actions -->
<div class="actions ml-3">
<a href="#" class="action-item mr-2" data-toggle="tooltip" title="Quick view">
<i class="fas fa-external-link-alt"></i>
</a>
<a href="#" class="action-item mr-2" data-toggle="tooltip" title="Edit">
<i class="fas fa-pencil-alt"></i>
</a>
<a href="#" class="action-item text-danger mr-2" data-toggle="tooltip" title="Move to trash">
<i class="fas fa-trash"></i>
</a>
</div>
</td>
</tr>
<tr class="table-divider"></tr>
<tr>
<th scope="row">
<div class="media align-items-center">
<div>
<img alt="Image placeholder" src="../../assets/img/theme/light/brand-avatar-4.png" class="avatar rounded-circle">
</div>
<div class="media-body ml-4">
<span class="name mb-0 text-sm">Purpose Website UI Kit</span>
</div>
</div>
</th>
<td class="budget">
$4400 USD
</td>
<td>
<span class="badge badge-dot mr-4">
<i class="bg-info"></i>
<span class="status">on schedule</span>
</span>
</td>
<td>
<div class="avatar-group">
<a href="#" class="avatar rounded-circle avatar-sm">
<img alt="Image placeholder" src="../../assets/img/theme/light/team-1-800x800.jpg" class="">
</a>
<a href="#" class="avatar rounded-circle avatar-sm">
<img alt="Image placeholder" src="../../assets/img/theme/light/team-2-800x800.jpg" class="">
</a>
<a href="#" class="avatar rounded-circle avatar-sm">
<img alt="Image placeholder" src="../../assets/img/theme/light/team-3-800x800.jpg" class="">
</a>
</div>
</td>
<td>
<div class="d-flex align-items-center">
<span class="completion mr-2">90%</span>
<div>
<div class="progress">
<div class="progress-bar bg-info" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100" style="width: 90%;"></div>
</div>
</div>
</div>
</td>
<td class="text-right">
<!-- Actions -->
<div class="actions ml-3">
<a href="#" class="action-item mr-2" data-toggle="tooltip" title="Quick view">
<i class="fas fa-external-link-alt"></i>
</a>
<a href="#" class="action-item mr-2" data-toggle="tooltip" title="Edit">
<i class="fas fa-pencil-alt"></i>
</a>
<a href="#" class="action-item text-danger mr-2" data-toggle="tooltip" title="Move to trash">
<i class="fas fa-trash"></i>
</a>
</div>
</td>
</tr>
</tbody>
</table>
</div>Orders
<div class="table-responsive">
<table class="table table-cards align-items-center">
<thead>
<tr>
<th scope="col">Invoice</th>
<th scope="col" class="sort">Order</th>
<th scope="col" class="sort">Client</th>
<th scope="col" class="sort">Value</th>
<th scope="col" class="sort">Taxes</th>
<th scope="col"></th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">
<button type="button" class="btn btn-sm btn-secondary btn-icon rounded-pill">
<span class="btn-inner--icon"><i class="fas fa-download"></i></span>
<span class="btn-inner--text">Invoice</span>
</button>
</th>
<td class="order">
<span class="h6 text-sm font-weight-bold mb-0">10/09/2018</span>
<span class="d-block text-sm text-muted">ABC 00023</span>
</td>
<td>
<span class="client">Apple Inc</span>
</td>
<td>
<span class="value text-sm mb-0">$1.274,89</span>
</td>
<td>
<span class="taxes text-sm mb-0">$1.115,45</span>
</td>
<td>
<div class="d-flex align-items-center justify-content-end">
<button type="button" class="btn btn-sm btn-soft-warning btn-icon rounded-pill">
<span class="btn-inner--icon"><i class="fas fa-plus"></i></span>
<span class="btn-inner--text">Pay now</span>
</button>
<!-- Actions -->
<div class="actions ml-3">
<a href="#" class="action-item mr-2" data-toggle="tooltip" title="Edit">
<i class="fas fa-pencil-alt"></i>
</a>
<a href="#" class="action-item mr-2" data-toggle="tooltip" title="Archive">
<i class="fas fa-archive"></i>
</a>
<div class="dropdown">
<a href="#" class="action-item" role="button" data-toggle="dropdown" aria-haspopup="true" data-expanded="false">
<i class="fas fa-ellipsis-v"></i>
</a>
<div class="dropdown-menu dropdown-menu-right">
<a href="#!" class="dropdown-item">
Action
</a>
<a href="#!" class="dropdown-item">
Another action
</a>
<a href="#!" class="dropdown-item">
Something else here
</a>
</div>
</div>
</div>
</div>
</td>
</tr>
<tr class="table-divider"></tr>
<tr>
<th scope="row">
<button type="button" class="btn btn-sm btn-secondary btn-icon rounded-pill">
<span class="btn-inner--icon"><i class="fas fa-download"></i></span>
<span class="btn-inner--text">Invoice</span>
</button>
</th>
<td class="order">
<span class="h6 text-sm font-weight-bold mb-0">10/09/2018</span>
<span class="d-block text-sm text-muted">ABC 00023</span>
</td>
<td>
<span class="client">Apple Inc</span>
</td>
<td>
<span class="value text-sm mb-0">$1.274,89</span>
</td>
<td>
<span class="taxes text-sm mb-0">$1.115,45</span>
</td>
<td>
<div class="d-flex align-items-center justify-content-end">
<button type="button" class="btn btn-sm btn-soft-success btn-icon rounded-pill">
<span class="btn-inner--icon"><i class="fas fa-check"></i></span>
<span class="btn-inner--text">Paid: 10/09/2018</span>
</button>
<!-- Actions -->
<div class="actions ml-3">
<a href="#" class="action-item mr-2" data-toggle="tooltip" title="Edit">
<i class="fas fa-pencil-alt"></i>
</a>
<a href="#" class="action-item mr-2" data-toggle="tooltip" title="Archive">
<i class="fas fa-archive"></i>
</a>
<div class="dropdown">
<a href="#" class="action-item" role="button" data-toggle="dropdown" aria-haspopup="true" data-expanded="false">
<i class="fas fa-ellipsis-v"></i>
</a>
<div class="dropdown-menu dropdown-menu-right">
<a href="#!" class="dropdown-item">
Action
</a>
<a href="#!" class="dropdown-item">
Another action
</a>
<a href="#!" class="dropdown-item">
Something else here
</a>
</div>
</div>
</div>
</div>
</td>
</tr>
<tr class="table-divider"></tr>
<tr>
<th scope="row">
<button type="button" class="btn btn-sm btn-secondary btn-icon rounded-pill">
<span class="btn-inner--icon"><i class="fas fa-download"></i></span>
<span class="btn-inner--text">Invoice</span>
</button>
</th>
<td class="order">
<span class="h6 text-sm font-weight-bold mb-0">10/09/2018</span>
<span class="d-block text-sm text-muted">ABC 00023</span>
</td>
<td>
<span class="client">Apple Inc</span>
</td>
<td>
<span class="value text-sm mb-0">$1.274,89</span>
</td>
<td>
<span class="taxes text-sm mb-0">$1.115,45</span>
</td>
<td>
<div class="d-flex align-items-center justify-content-end">
<button type="button" class="btn btn-sm btn-soft-success btn-icon rounded-pill">
<span class="btn-inner--icon"><i class="fas fa-check"></i></span>
<span class="btn-inner--text">Paid: 10/09/2018</span>
</button>
<!-- Actions -->
<div class="actions ml-3">
<a href="#" class="action-item mr-2" data-toggle="tooltip" title="Edit">
<i class="fas fa-pencil-alt"></i>
</a>
<a href="#" class="action-item mr-2" data-toggle="tooltip" title="Archive">
<i class="fas fa-archive"></i>
</a>
<div class="dropdown">
<a href="#" class="action-item" role="button" data-toggle="dropdown" aria-haspopup="true" data-expanded="false">
<i class="fas fa-ellipsis-v"></i>
</a>
<div class="dropdown-menu dropdown-menu-right">
<a href="#!" class="dropdown-item">
Action
</a>
<a href="#!" class="dropdown-item">
Another action
</a>
<a href="#!" class="dropdown-item">
Something else here
</a>
</div>
</div>
</div>
</div>
</td>
</tr>
<tr class="table-divider"></tr>
<tr>
<th scope="row">
<button type="button" class="btn btn-sm btn-secondary btn-icon rounded-pill">
<span class="btn-inner--icon"><i class="fas fa-download"></i></span>
<span class="btn-inner--text">Invoice</span>
</button>
</th>
<td class="order">
<span class="h6 text-sm font-weight-bold mb-0">10/09/2018</span>
<span class="d-block text-sm text-muted">ABC 00023</span>
</td>
<td>
<span class="client">Apple Inc</span>
</td>
<td>
<span class="value text-sm mb-0">$1.274,89</span>
</td>
<td>
<span class="taxes text-sm mb-0">$1.115,45</span>
</td>
<td>
<div class="d-flex align-items-center justify-content-end">
<button type="button" class="btn btn-sm btn-soft-success btn-icon rounded-pill">
<span class="btn-inner--icon"><i class="fas fa-check"></i></span>
<span class="btn-inner--text">Paid: 10/09/2018</span>
</button>
<!-- Actions -->
<div class="actions ml-3">
<a href="#" class="action-item mr-2" data-toggle="tooltip" title="Edit">
<i class="fas fa-pencil-alt"></i>
</a>
<a href="#" class="action-item mr-2" data-toggle="tooltip" title="Archive">
<i class="fas fa-archive"></i>
</a>
<div class="dropdown">
<a href="#" class="action-item" role="button" data-toggle="dropdown" aria-haspopup="true" data-expanded="false">
<i class="fas fa-ellipsis-v"></i>
</a>
<div class="dropdown-menu dropdown-menu-right">
<a href="#!" class="dropdown-item">
Action
</a>
<a href="#!" class="dropdown-item">
Another action
</a>
<a href="#!" class="dropdown-item">
Something else here
</a>
</div>
</div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>Tasks
| Task | Status | Progress | Due date | Team |
|---|---|---|---|---|
| Call with Dave | Priority | 70 | 20-03-2019 |
|
| Lunch meeting | Priority | 70 | 20-03-2019 |
|
| Webpixels website redesign | Priority | 70 | 20-03-2019 |
|
| Dashboard cards | Priority | 70 | 20-03-2019 |
|
<div class="table-responsive">
<table class="table table-cards align-items-center">
<thead>
<tr>
<th scope="col" class="sort" data-sort="name">Task</th>
<th scope="col" class="sort" data-sort="budget">Status</th>
<th scope="col" class="sort" data-sort="status">Progress</th>
<th scope="col">Due date</th>
<th scope="col" class="sort" data-sort="completion">Team</th>
</tr>
</thead>
<tbody class="list">
<tr>
<th scope="row">
<span class="font-weight-bold text-sm">Call with Dave</span>
</th>
<td>
<span class="badge badge-dot mr-4">
<i class="bg-success"></i> Priority
</span>
</td>
<td>
<span class="text-sm">70</span>
</td>
<td>
<span class="text-sm">20-03-2019</span>
</td>
<td>
<div class="avatar-group">
<a href="#" class="avatar rounded-circle avatar-sm">
<img alt="Image placeholder" src="../../assets/img/theme/light/team-1-800x800.jpg" class="">
</a>
<a href="#" class="avatar rounded-circle avatar-sm">
<img alt="Image placeholder" src="../../assets/img/theme/light/team-2-800x800.jpg" class="">
</a>
<a href="#" class="avatar rounded-circle avatar-sm">
<img alt="Image placeholder" src="../../assets/img/theme/light/team-3-800x800.jpg" class="">
</a>
</div>
</td>
</tr><tr class="table-divider"></tr>
<tr>
<th scope="row">
<span class="font-weight-bold text-sm">Lunch meeting</span>
</th>
<td>
<span class="badge badge-dot mr-4">
<i class="bg-warning"></i> Priority
</span>
</td>
<td>
<span class="text-sm">70</span>
</td>
<td>
<span class="text-sm">20-03-2019</span>
</td>
<td>
<div class="avatar-group">
<a href="#" class="avatar rounded-circle avatar-sm">
<img alt="Image placeholder" src="../../assets/img/theme/light/team-1-800x800.jpg" class="">
</a>
<a href="#" class="avatar rounded-circle avatar-sm">
<img alt="Image placeholder" src="../../assets/img/theme/light/team-2-800x800.jpg" class="">
</a>
<a href="#" class="avatar rounded-circle avatar-sm">
<img alt="Image placeholder" src="../../assets/img/theme/light/team-3-800x800.jpg" class="">
</a>
</div>
</td>
</tr><tr class="table-divider"></tr>
<tr>
<th scope="row">
<span class="font-weight-bold text-sm">Webpixels website redesign</span>
</th>
<td>
<span class="badge badge-dot mr-4">
<i class="bg-info"></i> Priority
</span>
</td>
<td>
<span class="text-sm">70</span>
</td>
<td>
<span class="text-sm">20-03-2019</span>
</td>
<td>
<div class="avatar-group">
<a href="#" class="avatar rounded-circle avatar-sm">
<img alt="Image placeholder" src="../../assets/img/theme/light/team-1-800x800.jpg" class="">
</a>
<a href="#" class="avatar rounded-circle avatar-sm">
<img alt="Image placeholder" src="../../assets/img/theme/light/team-2-800x800.jpg" class="">
</a>
<a href="#" class="avatar rounded-circle avatar-sm">
<img alt="Image placeholder" src="../../assets/img/theme/light/team-3-800x800.jpg" class="">
</a>
</div>
</td>
</tr><tr class="table-divider"></tr>
<tr>
<th scope="row">
<span class="font-weight-bold text-sm">Dashboard cards</span>
</th>
<td>
<span class="badge badge-dot mr-4">
<i class="bg-danger"></i> Priority
</span>
</td>
<td>
<span class="text-sm">70</span>
</td>
<td>
<span class="text-sm">20-03-2019</span>
</td>
<td>
<div class="avatar-group">
<a href="#" class="avatar rounded-circle avatar-sm">
<img alt="Image placeholder" src="../../assets/img/theme/light/team-1-800x800.jpg" class="">
</a>
<a href="#" class="avatar rounded-circle avatar-sm">
<img alt="Image placeholder" src="../../assets/img/theme/light/team-2-800x800.jpg" class="">
</a>
<a href="#" class="avatar rounded-circle avatar-sm">
<img alt="Image placeholder" src="../../assets/img/theme/light/team-3-800x800.jpg" class="">
</a>
</div>
</td>
</tr>
</tbody>
</table>
</div>Addresses
<div class="table-responsive">
<table class="table table-cards align-items-center">
<tbody class="list">
<tr>
<th scope="row">
<div class="custom-control custom-checkbox">
<input type="radio" class="custom-control-input" name="radio-address" id="tbl-addresses-check-1" checked>
<label class="custom-control-label" for="tbl-addresses-check-1"></label>
</div>
</th>
<td>
<span class="font-weight-600 text-dark">Address 1</span><span class="badge badge-pill badge-soft-info ml-2">Primary</span></td>
<td>
<p class="mb-0 text-muted text-limit text-sm">1333 Deerfield, State College PA, 16803</p>
</td>
<td>
<div class="actions">
<div class="dropdown">
<a class="action-item" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fas fa-ellipsis-v"></i></a>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="#"><i class="fas fa-edit text-muted"></i>Edit address</a>
<a class="dropdown-item" href="#"><i class="fas fa-trash-alt text-danger"></i>Move to trash</a>
</div>
</div>
</div>
</td>
</tr><tr class="table-divider"></tr>
<tr>
<th scope="row">
<div class="custom-control custom-checkbox">
<input type="radio" class="custom-control-input" name="radio-address" id="tbl-addresses-check-2">
<label class="custom-control-label" for="tbl-addresses-check-2"></label>
</div>
</th>
<td>
<span class="font-weight-600 text-dark">Address 2</span></td>
<td>
<p class="mb-0 text-muted text-limit text-sm">2047 Main Street, State Chicago CH, 20067</p>
</td>
<td>
<div class="actions">
<div class="dropdown">
<a class="action-item" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fas fa-ellipsis-v"></i></a>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="#"><i class="fas fa-edit text-muted"></i>Edit address</a>
<a class="dropdown-item" href="#"><i class="fas fa-trash-alt text-danger"></i>Move to trash</a>
</div>
</div>
</div>
</td>
</tr><tr class="table-divider"></tr>
<tr>
<th scope="row">
<div class="custom-control custom-checkbox">
<input type="radio" class="custom-control-input" name="radio-address" id="tbl-addresses-check-3">
<label class="custom-control-label" for="tbl-addresses-check-3"></label>
</div>
</th>
<td>
<span class="font-weight-600 text-dark">Address 3</span></td>
<td>
<p class="mb-0 text-muted text-limit text-sm">5078 Third Street, State New York NY, 33006</p>
</td>
<td>
<div class="actions">
<div class="dropdown">
<a class="action-item" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fas fa-ellipsis-v"></i></a>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="#"><i class="fas fa-edit text-muted"></i>Edit address</a>
<a class="dropdown-item" href="#"><i class="fas fa-trash-alt text-danger"></i>Move to trash</a>
</div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>Cart
<div class="table-responsive">
<table class="table table-cards align-items-center">
<thead>
<tr>
<th scope="col" class="sort" data-sort="product">Product</th>
<th scope="col" class="sort" data-sort="price">Price</th>
<th scope="col" class="sort" data-sort="size">Size</th>
<th scope="col">Quantity</th>
<th scope="col" class="sort" data-sort="total">Total</th>
<th scope="col"></th>
</tr>
</thead>
<tbody class="list">
<tr>
<th scope="row">
<div class="media align-items-center">
<img alt="Image placeholder" src="../../assets/img/theme/light/product-1.png" class="" style="width: 80px;">
<div class="media-body pl-3">
<div class="lh-100">
<span class="text-dark font-weight-bold mb-0">Home Base</span>
</div>
<span class="font-weight-bold text-muted">Size: 42</span>
</div>
</div>
</th>
<td class="price">
$129 USD
</td>
<td>
<span class="badge badge-dot mr-4">
<i class="bg-"></i>
<span class="status">42</span>
</span>
</td>
<td>
<input type="text" class="form-control form-control-sm text-center" style="width: 80px;" value="1">
</td>
<td class="total">
$129 USD
</td>
<td class="text-right">
<!-- Actions -->
<div class="actions ml-3">
<a href="#" class="action-item mr-2" data-toggle="tooltip" title="Quick view">
<i class="fas fa-external-link-alt"></i>
</a>
<a href="#" class="action-item mr-2" data-toggle="tooltip" title="Move to trash">
<i class="fas fa-times"></i>
</a>
</div>
</td>
</tr>
<tr class="table-divider"></tr>
<tr>
<th scope="row">
<div class="media align-items-center">
<img alt="Image placeholder" src="../../assets/img/theme/light/product-2.png" class="" style="width: 80px;">
<div class="media-body pl-3">
<div class="lh-100">
<span class="text-dark font-weight-bold mb-0">Home Controller</span>
</div>
<span class="font-weight-bold text-muted">Size: M</span>
</div>
</div>
</th>
<td class="price">
$49 USD
</td>
<td>
<span class="badge badge-dot mr-4">
<i class="bg-"></i>
<span class="status">M</span>
</span>
</td>
<td>
<input type="text" class="form-control form-control-sm text-center" style="width: 80px;" value="3">
</td>
<td class="total">
$147 USD
</td>
<td class="text-right">
<!-- Actions -->
<div class="actions ml-3">
<a href="#" class="action-item mr-2" data-toggle="tooltip" title="Quick view">
<i class="fas fa-external-link-alt"></i>
</a>
<a href="#" class="action-item mr-2" data-toggle="tooltip" title="Move to trash">
<i class="fas fa-times"></i>
</a>
</div>
</td>
</tr>
<tr class="table-divider"></tr>
<tr>
<th scope="row">
<div class="media align-items-center">
<img alt="Image placeholder" src="../../assets/img/theme/light/product-3.png" class="" style="width: 80px;">
<div class="media-body pl-3">
<div class="lh-100">
<span class="text-dark font-weight-bold mb-0">Adapt Earphones</span>
</div>
<span class="font-weight-bold text-muted">Size: L</span>
</div>
</div>
</th>
<td class="price">
$65 USD
</td>
<td>
<span class="badge badge-dot mr-4">
<i class="bg-"></i>
<span class="status">L</span>
</span>
</td>
<td>
<input type="text" class="form-control form-control-sm text-center" style="width: 80px;" value="1">
</td>
<td class="total">
$65 USD
</td>
<td class="text-right">
<!-- Actions -->
<div class="actions ml-3">
<a href="#" class="action-item mr-2" data-toggle="tooltip" title="Quick view">
<i class="fas fa-external-link-alt"></i>
</a>
<a href="#" class="action-item mr-2" data-toggle="tooltip" title="Move to trash">
<i class="fas fa-times"></i>
</a>
</div>
</td>
</tr>
<tr class="table-divider"></tr>
<tr>
<th scope="row">
<div class="media align-items-center">
<img alt="Image placeholder" src="../../assets/img/theme/light/product-4.png" class="" style="width: 80px;">
<div class="media-body pl-3">
<div class="lh-100">
<span class="text-dark font-weight-bold mb-0">Smart Pixel 3</span>
</div>
<span class="font-weight-bold text-muted">Size: 40</span>
</div>
</div>
</th>
<td class="price">
$299 USD
</td>
<td>
<span class="badge badge-dot mr-4">
<i class="bg-"></i>
<span class="status">40</span>
</span>
</td>
<td>
<input type="text" class="form-control form-control-sm text-center" style="width: 80px;" value="1">
</td>
<td class="total">
$299 USD
</td>
<td class="text-right">
<!-- Actions -->
<div class="actions ml-3">
<a href="#" class="action-item mr-2" data-toggle="tooltip" title="Quick view">
<i class="fas fa-external-link-alt"></i>
</a>
<a href="#" class="action-item mr-2" data-toggle="tooltip" title="Move to trash">
<i class="fas fa-times"></i>
</a>
</div>
</td>
</tr>
</tbody>
</table>
</div>