Chat List

Show All

  • A
  • B
  • D
  • J
  • O
Chat with Khelesh

Online

Hi, how are you samim? 8:40 AM, Today
Hi Khalid i am good tnx how about you? 8:55 AM, Today
I am good too, thank you for your chat template 9:00 AM, Today
You are welcome 9:05 AM, Today
I am looking for your next templates 9:07 AM, Today
Ok, thank you have a good day 9:10 AM, Today
Bye, see you 9:12 AM, Today
Hi, how are you samim? 8:40 AM, Today
Hi Khalid i am good tnx how about you? 8:55 AM, Today
I am good too, thank you for your chat template 9:00 AM, Today
You are welcome 9:05 AM, Today
I am looking for your next templates 9:07 AM, Today
Ok, thank you have a good day 9:10 AM, Today
Bye, see you 9:12 AM, Today
Notications

Show All

  • SEVER STATUS
  • KK
  • SOCIAL
  • RU
  • SEVER STATUS
  • AU
  • MO
Notes

Add New Nots

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

ROLL NO. NAME Email Date Status
542
Dr. Jackson
example@example.com 01 August 2020
Successful
542
Dr. Jackson
example@example.com 01 August 2020
Canceled
542
Dr. Jackson
example@example.com 01 August 2020
Pending

		<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="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="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="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% Complete
70%
2 Textiles
70% Complete
70%
3 Milk Powder
70% Complete
70%
4 Vehicles
70% Complete
70%
5 Boats
70% Complete
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

Task Progress Deadline Label Action
Air Conditioner
70% Complete
Apr 20,2018 70%
Textiles
70% Complete
May 27,2018 70%
Milk Powder
70% Complete
May 18,2018 70%
Vehicles
70% Complete
Mar 27,2018 70%
Boats
70% Complete
Jun 28,2018 70%


		<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

Task Progress Deadline Label Action
Air Conditioner
70% Complete
Apr 20,2018 70%
Textiles
70% Complete
May 27,2018 70%
Milk Powder
70% Complete
May 18,2018 70%
Boats
70% Complete
Jun 28,2018 70%


		<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 @twitter


		<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 @twitter

		<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 @twitter
4 Larry the Bird @twitter
5 Larry the Bird @twitter
5 Larry the Bird @twitter

			<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>