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 badge-sm badge-success light ">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 badge-sm badge-danger light">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 badge-sm badge-warning light">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-success 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-success 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="/diy_templates/bootstrapmb-13982/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 light 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-success 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="/diy_templates/bootstrapmb-13982/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 light 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-success 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="/diy_templates/bootstrapmb-13982/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 light 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-sm 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-sm 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-sm badge-danger light">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-sm 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-sm badge-success light 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-sm badge-danger light">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-sm 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-sm 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-sm badge-danger light">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-sm 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-sm 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-sm badge-danger light 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-sm 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-sm badge-success light">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-sm 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-sm badge-danger light">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-sm 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-sm 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-sm 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-sm badge-danger light">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-sm 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-sm badge-success 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>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-sm 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-sm badge-danger 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>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-sm 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-sm 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-sm badge-success 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>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-sm 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>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-sm 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();">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-sm badge-success light">Paid</span>
</td>
<td>EN</td>
</tr>
<tr>
<td><a href="javascript:void();">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-sm badge-info light">Shipped</span>
</td>
<td>CN</td>
</tr>
<tr>
<td><a href="javascript:void();">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-sm badge-danger light">Shipped</span>
</td>
<td>AU</td>
</tr>
<tr>
<td><a href="javascript:void();">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-sm badge-success light">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 | |
| 5 | 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>