Basic Bootstrap Table
Bootstrap Table.
Make use of Bootstrap's unique Bootstrap Table styles to enhance actions in forms, dialogs, and various other elements, featuring comprehensive support for multiple sizes, states, and additional functionalities.
Bootstrap TableBootstrap Table
Recent Payments Queue
Recent Payments Queue. Add table boootrstap class in root
| # | PATIENT | DR NAME | DATE | STATUS | PRICE | |
|---|---|---|---|---|---|---|
| 01 | Mr. Bobby | Dr. Jackson | 01 August 2020 | Successful | $21.56 |
|
| 02 | Mr. Bobby | Dr. Jackson | 01 August 2020 | Canceled | $21.56 |
|
| 03 | Mr. Bobby | Dr. Jackson | 01 August 2020 | Pending | $21.56 |
|
<div class="table-responsive">
<table class="table table-responsive-md">
<thead>
<tr>
<th style="width:80px;"><strong>#</strong></th>
<th><strong>PATIENT</strong></th>
<th><strong>DR NAME</strong></th>
<th><strong>DATE</strong></th>
<th><strong>STATUS</strong></th>
<th><strong>PRICE</strong></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>01</strong></td>
<td>Mr. Bobby</td>
<td>Dr. Jackson</td>
<td>01 August 2020</td>
<td><span class="badge light badge-success">Successful</span></td>
<td>$21.56</td>
<td>
<div class="dropdown">
<button type="button" class="btn btn-success light sharp" data-bs-toggle="dropdown">
<svg width="20px" height="20px" viewBox="0 0 24 24" version="1.1"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><rect x="0" y="0" width="24" height="24"/><circle fill="#000000" cx="5" cy="12" r="2"/><circle fill="#000000" cx="12" cy="12" r="2"/><circle fill="#000000" cx="19" cy="12" r="2"/></g></svg>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Edit</a>
<a class="dropdown-item" href="#">Delete</a>
</div>
</div>
</td>
</tr>
<tr>
<td><strong>02</strong></td>
<td>Mr. Bobby</td>
<td>Dr. Jackson</td>
<td>01 August 2020</td>
<td><span class="badge light badge-danger">Canceled</span></td>
<td>$21.56</td>
<td>
<div class="dropdown">
<button type="button" class="btn btn-danger light sharp" data-bs-toggle="dropdown">
<svg width="20px" height="20px" viewBox="0 0 24 24" version="1.1"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><rect x="0" y="0" width="24" height="24"/><circle fill="#000000" cx="5" cy="12" r="2"/><circle fill="#000000" cx="12" cy="12" r="2"/><circle fill="#000000" cx="19" cy="12" r="2"/></g></svg>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Edit</a>
<a class="dropdown-item" href="#">Delete</a>
</div>
</div>
</td>
</tr>
<tr>
<td><strong>03</strong></td>
<td>Mr. Bobby</td>
<td>Dr. Jackson</td>
<td>01 August 2020</td>
<td><span class="badge light badge-warning">Pending</span></td>
<td>$21.56</td>
<td>
<div class="dropdown">
<button type="button" class="btn btn-warning light sharp" data-bs-toggle="dropdown">
<svg width="20px" height="20px" viewBox="0 0 24 24" version="1.1"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><rect x="0" y="0" width="24" height="24"/><circle fill="#000000" cx="5" cy="12" r="2"/><circle fill="#000000" cx="12" cy="12" r="2"/><circle fill="#000000" cx="19" cy="12" r="2"/></g></svg>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Edit</a>
<a class="dropdown-item" href="#">Delete</a>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
Exam Toppers
Exam Toppers. Add class exam with the class bootstrap-table
<div class="table-responsive">
<table class="table table-responsive-md">
<thead>
<tr>
<th style="width:50px;">
<div class="form-check custom-checkbox checkbox-primary check-lg me-3">
<input type="checkbox" class="form-check-input" id="checkAll" required="">
<label class="form-check-label" for="checkAll"></label>
</div>
</th>
<th><strong>ROLL NO.</strong></th>
<th><strong>NAME</strong></th>
<th><strong>Email</strong></th>
<th><strong>Date</strong></th>
<th><strong>Status</strong></th>
<th><strong></strong></th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="form-check custom-checkbox checkbox-primary check-lg me-3">
<input type="checkbox" class="form-check-input" id="customCheckBox2" required="">
<label class="form-check-label" for="customCheckBox2"></label>
</div>
</td>
<td><strong>542</strong></td>
<td>
<div class="d-flex align-items-center">
<img src="images/avatar/1.jpg" class="rounded-lg me-2" width="24" alt="">
<span class="w-space-no">Dr. Jackson</span>
</div>
</td>
<td>example@example.com </td>
<td>01 August 2020</td>
<td><div class="d-flex align-items-center"><i class="fa fa-circle text-success me-1"></i> Successful</div></td>
<td>
<div class="d-flex">
<a href="#" class="btn btn-primary shadow btn-xs sharp me-1"><i class="fa fa-pencil"></i></a>
<a href="#" class="btn btn-danger shadow btn-xs sharp"><i class="fa fa-trash"></i></a>
</div>
</td>
</tr>
<tr>
<td>
<div class="form-check custom-checkbox checkbox-primary check-lg me-3">
<input type="checkbox" class="form-check-input" id="customCheckBox3" required="">
<label class="form-check-label" for="customCheckBox3"></label>
</div>
</td>
<td><strong>542</strong></td>
<td><div class="d-flex align-items-center"><img src="images/avatar/2.jpg" class="rounded-lg me-2" width="24" alt=""> <span class="w-space-no">Dr. Jackson</span></div></td>
<td>example@example.com </td>
<td>01 August 2020</td>
<td><div class="d-flex align-items-center"><i class="fa fa-circle text-danger me-1"></i> Canceled</div></td>
<td>
<div class="d-flex">
<a href="#" class="btn btn-primary shadow btn-xs sharp me-1"><i class="fa fa-pencil"></i></a>
<a href="#" class="btn btn-danger shadow btn-xs sharp"><i class="fa fa-trash"></i></a>
</div>
</td>
</tr>
<tr>
<td>
<div class="form-check custom-checkbox checkbox-primary check-lg me-3">
<input type="checkbox" class="form-check-input" id="customCheckBox4" required="">
<label class="form-check-label" for="customCheckBox4"></label>
</div>
</td>
<td><strong>542</strong></td>
<td><div class="d-flex align-items-center"><img src="images/avatar/3.jpg" class="rounded-lg me-2" width="24" alt=""> <span class="w-space-no">Dr. Jackson</span></div></td>
<td>example@example.com </td>
<td>01 August 2020</td>
<td><div class="d-flex align-items-center"><i class="fa fa-circle text-warning me-1"></i> Pending</div></td>
<td>
<div class="d-flex">
<a href="#" class="btn btn-primary shadow btn-xs sharp me-1"><i class="fa fa-pencil"></i></a>
<a href="#" class="btn btn-danger shadow btn-xs sharp"><i class="fa fa-trash"></i></a>
</div>
</td>
</tr>
</tbody>
</table>
</div>
Basic
Add basic class with bootsrtap-table
| # | Name | Status | Date | Price |
|---|---|---|---|---|
| 1 | Kolor Tea Shirt For Man | Sale | January 22 | $21.56 |
| 2 | Kolor Tea Shirt For Women | Tax | January 30 | $55.32 |
| 3 | Blue Backpack For Baby | Extended | January 25 | $14.85 |
<div class="table-responsive">
<table class="table table-responsive-sm">
<thead>
<tr>
<th>#</th>
<th>Name</th>
<th>Status</th>
<th>Date</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<td>Kolor Tea Shirt For Man</td>
<td><span class="badge badge-primary light">Sale</span>
</td>
<td>January 22</td>
<td class="color-primary">$21.56</td>
</tr>
<tr>
<th>2</th>
<td>Kolor Tea Shirt For Women</td>
<td><span class="badge badge-success">Tax</span>
</td>
<td>January 30</td>
<td class="color-success">$55.32</td>
</tr>
<tr>
<th>3</th>
<td>Blue Backpack For Baby</td>
<td><span class="badge badge-danger">Extended</span>
</td>
<td>January 25</td>
<td class="text-danger">$14.85</td>
</tr>
</tbody>
</table>
</div>
Table Striped
Add table striped class with bootsrtap-table
| # | Name | Status | Date | Price |
|---|---|---|---|---|
| 1 | Kolor Tea Shirt For Man | Sale | January 22 | $21.56 |
| 2 | Kolor Tea Shirt For Women | Tax | January 30 | $55.32 |
| 3 | Blue Backpack For Baby | Extended | January 25 | $14.85 |
<div class="table-responsive">
<table class="table table-striped table-responsive-sm">
<thead>
<tr>
<th>#</th>
<th>Name</th>
<th>Status</th>
<th>Date</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<td>Kolor Tea Shirt For Man</td>
<td><span class="badge badge-primary">Sale</span>
</td>
<td>January 22</td>
<td class="color-primary">$21.56</td>
</tr>
<tr>
<th>2</th>
<td>Kolor Tea Shirt For Women</td>
<td><span class="badge badge-success light">Tax</span>
</td>
<td>January 30</td>
<td class="color-success">$55.32</td>
</tr>
<tr>
<th>3</th>
<td>Blue Backpack For Baby</td>
<td><span class="badge badge-danger">Extended</span>
</td>
<td>January 25</td>
<td class="text-danger">$14.85</td>
</tr>
</tbody>
</table>
</div>
Table Bordered
Add table bordered class with bootsrap-table
| # | Name | Status | Date | Price |
|---|---|---|---|---|
| 1 | Kolor Tea Shirt For Man | Sale | January 22 | $21.56 |
| 2 | Kolor Tea Shirt For Women | Tax | January 30 | $55.32 |
| 3 | Blue Backpack For Baby | Extended | January 25 | $14.85 |
<div class="table-responsive">
<table class="table table-bordered table-responsive-sm">
<thead>
<tr>
<th>#</th>
<th>Name</th>
<th>Status</th>
<th>Date</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<td>Kolor Tea Shirt For Man</td>
<td><span class="badge badge-primary">Sale</span>
</td>
<td>January 22</td>
<td class="color-primary">$21.56</td>
</tr>
<tr>
<th>2</th>
<td>Kolor Tea Shirt For Women</td>
<td><span class="badge badge-success">Tax</span>
</td>
<td>January 30</td>
<td class="color-success">$55.32</td>
</tr>
<tr>
<th>3</th>
<td>Blue Backpack For Baby</td>
<td><span class="badge badge-danger">Extended</span>
</td>
<td>January 25</td>
<td class="text-danger">$14.85</td>
</tr>
</tbody>
</table>
</div>
Table Hover
Add table hover class with bootsrap-table
| # | Name | Status | Date | Price |
|---|---|---|---|---|
| 1 | Kolor Tea Shirt For Man | Sale | January 22 | $21.56 |
| 2 | Kolor Tea Shirt For Women | Tax | January 30 | $55.32 |
| 3 | Blue Backpack For Baby | Extended | January 25 | $14.85 |
<div class="table-responsive">
<table class="table table-hover table-responsive-sm">
<thead>
<tr>
<th>#</th>
<th>Name</th>
<th>Status</th>
<th>Date</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<td>Kolor Tea Shirt For Man</td>
<td><span class="badge badge-primary light">Sale</span>
</td>
<td>January 22</td>
<td class="color-primary">$21.56</td>
</tr>
<tr>
<th>2</th>
<td>Kolor Tea Shirt For Women</td>
<td><span class="badge badge-success">Tax</span>
</td>
<td>January 30</td>
<td class="color-success">$55.32</td>
</tr>
<tr>
<th>3</th>
<td>Blue Backpack For Baby</td>
<td><span class="badge badge-danger light">Extended</span>
</td>
<td>January 25</td>
<td class="text-danger">$14.85</td>
</tr>
</tbody>
</table>
</div>
Hover Table
Add hover table class with bootsrtap-table
| # | Product | Popularity | Sales |
|---|---|---|---|
| 1 | Air Conditioner |
|
70% |
| 2 | Textiles |
|
70% |
| 3 | Milk Powder |
|
70% |
| 4 | Vehicles |
|
70% |
| 5 | Boats |
|
70% |
<div class="table-responsive">
<table class="table header-border table-hover verticle-middle">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Product</th>
<th scope="col">Popularity</th>
<th scope="col">Sales</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<td>Air Conditioner</td>
<td>
<div class="progress" style="background: rgba(127, 99, 244, .1)">
<div class="progress-bar" style="width: 70%;" role="progressbar"><span class="sr-only">70% Complete</span>
</div>
</div>
</td>
<td><span class="badge badge-primary light">70%</span>
</td>
</tr>
<tr>
<th>2</th>
<td>Textiles</td>
<td>
<div class="progress" style="background: rgba(76, 175, 80, .1)">
<div class="progress-bar bg-success" style="width: 70%;" role="progressbar"><span class="sr-only">70% Complete</span>
</div>
</div>
</td>
<td><span class="badge badge-success">70%</span>
</td>
</tr>
<tr>
<th>3</th>
<td>Milk Powder</td>
<td>
<div class="progress" style="background: rgba(70, 74, 83, .1)">
<div class="progress-bar bg-dark" style="width: 70%;" role="progressbar"><span class="sr-only">70% Complete</span>
</div>
</div>
</td>
<td><span class="badge badge-dark light">70%</span>
</td>
</tr>
<tr>
<th>4</th>
<td>Vehicles</td>
<td>
<div class="progress" style="background: rgba(255, 87, 34, .1)">
<div class="progress-bar bg-danger" style="width: 70%;" role="progressbar"><span class="sr-only">70% Complete</span>
</div>
</div>
</td>
<td><span class="badge badge-danger">70%</span>
</td>
</tr>
<tr>
<th>5</th>
<td>Boats</td>
<td>
<div class="progress" style="background: rgba(255, 193, 7, .1)">
<div class="progress-bar bg-warning" style="width: 70%;" role="progressbar"><span class="sr-only">70% Complete</span>
</div>
</div>
</td>
<td><span class="badge badge-warning">70%</span>
</td>
</tr>
</tbody>
</table>
</div>
Table Bordered
Add table bordered class with bootsrtap-table
| # | Name | Status | Date | Price |
|---|---|---|---|---|
| 1 | Kolor Tea Shirt For Man | Sale | January 22 | $21.56 |
| 2 | Kolor Tea Shirt For Women | Tax | January 30 | $55.32 |
| 3 | Blue Backpack For Baby | Extended | January 25 | $14.85 |
<div class="table-responsive">
<table class="table table-bordered table-responsive-sm">
<thead>
<tr>
<th>#</th>
<th>Name</th>
<th>Status</th>
<th>Date</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<td>Kolor Tea Shirt For Man</td>
<td><span class="badge badge-primary">Sale</span>
</td>
<td>January 22</td>
<td class="color-primary">$21.56</td>
</tr>
<tr>
<th>2</th>
<td>Kolor Tea Shirt For Women</td>
<td><span class="badge badge-success">Tax</span>
</td>
<td>January 30</td>
<td class="color-success">$55.32</td>
</tr>
<tr>
<th>3</th>
<td>Blue Backpack For Baby</td>
<td><span class="badge badge-danger">Extended</span>
</td>
<td>January 25</td>
<td class="text-danger">$14.85</td>
</tr>
</tbody>
</table>
</div>
Bordered Table
Add bordered table class with bootsrap-table
<div class="table-responsive">
<table class="table table-bordered verticle-middle table-responsive-sm">
<thead>
<tr>
<th scope="col">Task</th>
<th scope="col">Progress</th>
<th scope="col">Deadline</th>
<th scope="col">Label</th>
<th scope="col">Action</th>
</tr>
</thead>
<tbody>
<tr>
<td>Air Conditioner</td>
<td>
<div class="progress" style="background: rgba(127, 99, 244, .1)">
<div class="progress-bar bg-primary" style="width: 70%;" role="progressbar"><span class="sr-only">70% Complete</span>
</div>
</div>
</td>
<td>Apr 20,2018</td>
<td><span class="badge badge-primary light">70%</span>
</td>
<td>
<span>
<a href="javascript:void(0);" class="me-4" data-bs-toggle="tooltip"
data-placement="top" title="Edit"><i
class="fa fa-pencil color-muted"></i> </a>
<a href="javascript:void(0);" data-bs-toggle="tooltip"
data-placement="top" title="btn-close"><i
class="fa-solid fa-xmark text-danger"></i></a>
</span>
</td>
</tr>
<tr>
<td>Textiles</td>
<td>
<div class="progress" style="background: rgba(76, 175, 80, .1)">
<div class="progress-bar bg-success" style="width: 70%;" role="progressbar"><span class="sr-only">70% Complete</span>
</div>
</div>
</td>
<td>May 27,2018</td>
<td><span class="badge badge-success">70%</span>
</td>
<td><span><a href="javascript:void(0);" class="me-4" data-bs-toggle="tooltip"
data-placement="top" title="Edit"><i
class="fa fa-pencil color-muted"></i> </a><a
href="javascript:void(0);" data-bs-toggle="tooltip"
data-placement="top" title="btn-close"><i
class="fa-solid fa-xmark text-danger"></i></a></span>
</td>
</tr>
<tr>
<td>Milk Powder</td>
<td>
<div class="progress" style="background: rgba(70, 74, 83, .1)">
<div class="progress-bar bg-dark" style="width: 70%;" role="progressbar"><span class="sr-only">70% Complete</span>
</div>
</div>
</td>
<td>May 18,2018</td>
<td><span class="badge badge-dark light">70%</span>
</td>
<td><span><a href="javascript:void(0);" class="me-4" data-bs-toggle="tooltip"
data-placement="top" title="Edit"><i
class="fa fa-pencil color-muted"></i> </a><a
href="javascript:void(0);" data-bs-toggle="tooltip"
data-placement="top" title="btn-close"><i
class="fa-solid fa-xmark text-danger"></i></a></span>
</td>
</tr>
<tr>
<td>Vehicles</td>
<td>
<div class="progress" style="background: rgba(255, 87, 34, .1)">
<div class="progress-bar bg-danger" style="width: 70%;" role="progressbar"><span class="sr-only">70% Complete</span>
</div>
</div>
</td>
<td>Mar 27,2018</td>
<td><span class="badge badge-danger">70%</span>
</td>
<td><span><a href="javascript:void(0);" class="me-4" data-bs-toggle="tooltip"
data-placement="top" title="Edit"><i
class="fa fa-pencil color-muted"></i> </a><a
href="javascript:void(0);" data-bs-toggle="tooltip"
data-placement="top" title="btn-close"><i
class="fa-solid fa-xmark text-danger"></i></a></span>
</td>
</tr>
<tr>
<td>Boats</td>
<td>
<div class="progress" style="background: rgba(255, 193, 7, .1)">
<div class="progress-bar bg-warning" style="width: 70%;" role="progressbar"><span class="sr-only">70% Complete</span>
</div>
</div>
</td>
<td>Jun 28,2018</td>
<td><span class="badge badge-warning">70%</span>
</td>
<td><span><a href="javascript:void(0);" class="me-4" data-bs-toggle="tooltip"
data-placement="top" title="Edit"><i
class="fa fa-pencil color-muted"></i> </a><a
href="javascript:void(0);" data-bs-toggle="tooltip"
data-placement="top" title="btn-close"><i
class="fa-solid fa-xmark text-danger"></i></a></span>
</td>
</tr>
</tbody>
</table>
</div>
Table Stripped
Add class table stripeed with bootsrap-table
<div class="table-responsive">
<table class="table table-bordered table-striped verticle-middle table-responsive-sm">
<thead>
<tr>
<th scope="col">Task</th>
<th scope="col">Progress</th>
<th scope="col">Deadline</th>
<th scope="col">Label</th>
<th scope="col">Action</th>
</tr>
</thead>
<tbody>
<tr>
<td>Air Conditioner</td>
<td>
<div class="progress" style="background: rgba(127, 99, 244, .1)">
<div class="progress-bar bg-primary" style="width: 70%;" role="progressbar"><span class="sr-only">70% Complete</span>
</div>
</div>
</td>
<td>Apr 20,2018</td>
<td><span class="badge badge-primary">70%</span>
</td>
<td><span><a href="javascript:void(0);" class="me-4" data-bs-toggle="tooltip"
data-placement="top" title="Edit"><i
class="fa fa-pencil color-muted"></i> </a><a
href="javascript:void(0);" data-bs-toggle="tooltip"
data-placement="top" title="btn-close"><i
class="fa-solid fa-xmark text-danger"></i></a></span>
</td>
</tr>
<tr>
<td>Textiles</td>
<td>
<div class="progress" style="background: rgba(76, 175, 80, .1)">
<div class="progress-bar bg-success" style="width: 70%;" role="progressbar"><span class="sr-only">70% Complete</span>
</div>
</div>
</td>
<td>May 27,2018</td>
<td><span class="badge badge-success">70%</span>
</td>
<td><span><a href="javascript:void(0);" class="me-4" data-bs-toggle="tooltip"
data-placement="top" title="Edit"><i
class="fa fa-pencil color-muted"></i> </a><a
href="javascript:void(0);" data-bs-toggle="tooltip"
data-placement="top" title="btn-close"><i
class="fa-solid fa-xmark text-danger"></i></a></span>
</td>
</tr>
<tr>
<td>Milk Powder</td>
<td>
<div class="progress" style="background: rgba(70, 74, 83, .1)">
<div class="progress-bar bg-dark" style="width: 70%;" role="progressbar"><span class="sr-only">70% Complete</span>
</div>
</div>
</td>
<td>May 18,2018</td>
<td><span class="badge badge-dark">70%</span>
</td>
<td><span><a href="javascript:void(0);" class="me-4" data-bs-toggle="tooltip"
data-placement="top" title="Edit"><i
class="fa fa-pencil color-muted"></i> </a><a
href="javascript:void(0);" data-bs-toggle="tooltip"
data-placement="top" title="btn-close"><i
class="fa-solid fa-xmark text-danger"></i></a></span>
</td>
</tr>
<tr>
<td>Boats</td>
<td>
<div class="progress" style="background: rgba(255, 193, 7, .1)">
<div class="progress-bar bg-warning" style="width: 70%;" role="progressbar"><span class="sr-only">70% Complete</span>
</div>
</div>
</td>
<td>Jun 28,2018</td>
<td><span class="badge badge-warning">70%</span>
</td>
<td><span><a href="javascript:void(0);" class="me-4" data-bs-toggle="tooltip"
data-placement="top" title="Edit"><i
class="fa fa-pencil color-muted"></i> </a><a
href="javascript:void(0);" data-bs-toggle="tooltip"
data-placement="top" title="btn-close"><i
class="fa-solid fa-xmark text-danger"></i></a></span>
</td>
</tr>
</tbody>
</table>
</div>
Responsive Table
Add class responsive table with bootstrap-table
| Invoice | User | Date | Amount | Status | Country |
|---|---|---|---|---|---|
| Order #26589 | Herman Beck | Oct 16, 2017 | $45.00 | Paid | EN |
| Order #58746 | Mary Adams | Oct 12, 2017 | $245.30 | Shipped | CN |
| Order #98458 | Caleb Richards | May 18, 2017 | $38.00 | Shipped | AU |
| Order #32658 | June Lane | Apr 28, 2017 | $77.99 | Paid | FR |
<div class="table-responsive">
<table class="table header-border table-responsive-sm">
<thead>
<tr>
<th>Invoice</th>
<th>User</th>
<th>Date</th>
<th>Amount</th>
<th>Status</th>
<th>Country</th>
</tr>
</thead>
<tbody>
<tr>
<td><a href="javascript:void(0);;">Order #26589</a>
</td>
<td>Herman Beck</td>
<td><span class="text-muted">Oct 16, 2017</span>
</td>
<td>$45.00</td>
<td><span class="badge badge-success">Paid</span>
</td>
<td>EN</td>
</tr>
<tr>
<td><a href="javascript:void(0);;">Order #58746</a>
</td>
<td>Mary Adams</td>
<td><span class="text-muted">Oct 12, 2017</span>
</td>
<td>$245.30</td>
<td><span class="badge badge-info light">Shipped</span>
</td>
<td>CN</td>
</tr>
<tr>
<td><a href="javascript:void(0);;">Order #98458</a>
</td>
<td>Caleb Richards</td>
<td><span class="text-muted">May 18, 2017</span>
</td>
<td>$38.00</td>
<td><span class="badge badge-danger">Shipped</span>
</td>
<td>AU</td>
</tr>
<tr>
<td><a href="javascript:void(0);;">Order #32658</a>
</td>
<td>June Lane</td>
<td><span class="text-muted">Apr 28, 2017</span>
</td>
<td>$77.99</td>
<td><span class="badge badge-success">Paid</span>
</td>
<td>FR</td>
</tr>
</tbody>
</table>
</div>
Heading With Background
Add heading with background and heading class with bootsrtap-table
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird |
<div class="table-responsive">
<table class="table">
<thead class="thead-info">
<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>1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th>2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th>3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</div>
Primary Table
Add primary table class with bootsrap-table
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird |
<div class="table-responsive">
<table class="table primary-table-bordered">
<thead class="thead-primary">
<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>1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th>2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th>3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</div>Primary Table Hover
Add primary table hover class with bootsrap-table
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird | |
| 4 | Larry | the Bird | |
| 5 | Larry | the Bird | |
| 6 | Larry | the Bird |
<div class="table-responsive">
<table class="table primary-table-bg-hover">
<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>1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th>2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th>3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
<tr>
<th>4</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
<tr>
<th>5</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
<tr>
<th>5</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</div>
Contextual Table
Add contextual table class with bootsrap-table
| # | Column heading | Column heading | Column heading |
|---|---|---|---|
| 1 | Column content | Column content | Column content |
| 1 | Column content | Column content | Column content |
| 2 | Column content | Column content | Column content |
| 3 | Column content | Column content | Column content |
| 4 | Column content | Column content | Column content |
| 5 | Column content | Column content | Column content |
<div class="table-responsive">
<table class="table header-border" style="min-width: 500px;">
<thead>
<tr>
<th>#</th>
<th>Column heading</th>
<th>Column heading</th>
<th>Column heading</th>
</tr>
</thead>
<tbody>
<tr class="table-active">
<td>1</td>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
<tr class="table-primary">
<td>1</td>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
<tr class="table-success">
<td>2</td>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
<tr class="table-info">
<td>3</td>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
<tr class="table-warning">
<td>4</td>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
<tr class="table-danger">
<td>5</td>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
</tbody>
</table>
</div>