Valex - Bootstrap 5 Premium Admin & Dashboard Template

New Websites is Created

30 mins ago

Prepare For the Next Project

2 hours ago

Decide the live Discussion

3 hours ago

Meeting at 3:00 pm

4 hours ago

Prepare for Presentation

1 day ago

Prepare for Presentation

1 day ago

Prepare for Presentation

45 minutes ago

Prepare for Presentation

2 days ago

Madeleine Hey! there I' am available....

3 hours ago

Anthony New product Launching...

5 hour ago

Olivia New Schedule Realease......

45 minutes ago

Madeleine Hey! there I' am available....

3 hours ago

Anthony New product Launching...

5 hour ago

Olivia New Schedule Realease......

45 minutes ago

Olivia Hey! there I' am available....

12 minutes ago

Mozelle Belt

Florinda Carasco

Alina Bernier

Zula Mclaughin

Isidro Heide

Mozelle Belt

Florinda Carasco

Alina Bernier

Zula Mclaughin

Isidro Heide

Florinda Carasco

Alina Bernier

Zula Mclaughin

Isidro Heide

Basic Tables

Name	Created On	Number	Status
Mark	21,Dec 2021	+1234-12340	Completed
Monika	29,April 2022	+1523-12459	Failed
Madina	30,Nov 2022	+1982-16234	Successful
Bhamako	18,Mar 2022	+1526-10729	Pending

<div class="table-responsive">
    <table class="table text-nowrap">
        <thead>
            <tr>
                <th scope="col">Name</th>
                <th scope="col">Created On</th>
                <th scope="col">Number</th>
                <th scope="col">Status</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th scope="row">Mark</th>
                <td>21,Dec 2021</td>
                <td>+1234-12340</td>
                <td><span class="badge bg-outline-primary">Completed</span></td>
            </tr>
            <tr>
                <th scope="row">Monika</th>
                <td>29,April 2022</td>
                <td>+1523-12459</td>
                <td><span class="badge bg-outline-warning">Failed</span></td>
            </tr>
            <tr>
                <th scope="row">Madina</th>
                <td>30,Nov 2022</td>
                <td>+1982-16234</td>
                <td><span class="badge bg-outline-success">Successful</span></td>
            </tr>
            <tr>
                <th scope="row">Bhamako</th>
                <td>18,Mar 2022</td>
                <td>+1526-10729</td>
                <td><span class="badge bg-outline-secondary">Pending</span></td>
            </tr>
        </tbody>
    </table>
</div>

Bordered Tables

User	Status	Email
Sukuro Kim	Active	kimosukuro@gmail.com
Hasimna	Inactive	hasimna2132@gmail.com
Azimo Khan	Active	azimokhan421@gmail.com
Samantha Julia	Active	julianasams143@gmail.com

<div class="table-responsive">
    <table class="table text-nowrap table-bordered">
        <thead>
            <tr>
                <th scope="col">User</th>
                <th scope="col">Status</th>
                <th scope="col">Email</th>
                <th scope="col">Action</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th scope="row">
                    <div class="d-flex align-items-center">
                        <span class="avatar avatar-xs me-2 online avatar-rounded">
                            <img src="../assets/images/faces/13.jpg" alt="img">
                        </span>Sukuro Kim
                    </div>
                </th>
                <td><span class="badge bg-success-transparent">Active</span></td>
                <td>kimosukuro@gmail.com</td>
                <td>
                    <div class="hstack gap-2 flex-wrap">
                        <a href="javascript:void(0);" class="text-info fs-14 lh-1"><i
                                class="ri-edit-line"></i></a>
                        <a href="javascript:void(0);" class="text-danger fs-14 lh-1"><i
                                class="ri-delete-bin-5-line"></i></a>
                    </div>
                </td>
            </tr>
            <tr>
                <th scope="row">
                    <div class="d-flex align-items-center">
                        <span class="avatar avatar-xs me-2 offline avatar-rounded">
                            <img src="../assets/images/faces/6.jpg" alt="img">
                        </span>Hasimna
                    </div>
                </th>
                <td><span class="badge bg-light text-dark">Inactive</span></td>
                <td>hasimna2132@gmail.com</td>
                <td>
                    <div class="hstack gap-2 flex-wrap">
                        <a href="javascript:void(0);" class="text-info fs-14 lh-1"><i
                                class="ri-edit-line"></i></a>
                        <a href="javascript:void(0);" class="text-danger fs-14 lh-1"><i
                                class="ri-delete-bin-5-line"></i></a>
                    </div>
                </td>
            </tr>
            <tr>
                <th scope="row">
                    <div class="d-flex align-items-center">
                        <span class="avatar avatar-xs me-2 online avatar-rounded">
                            <img src="../assets/images/faces/15.jpg" alt="img">
                        </span>Azimo Khan
                    </div>
                </th>
                <td><span class="badge bg-success-transparent">Active</span></td>
                <td>azimokhan421@gmail.com</td>
                <td>
                    <div class="hstack gap-2 flex-wrap">
                        <a href="javascript:void(0);" class="text-info fs-14 lh-1"><i
                                class="ri-edit-line"></i></a>
                        <a href="javascript:void(0);" class="text-danger fs-14 lh-1"><i
                                class="ri-delete-bin-5-line"></i></a>
                    </div>
                </td>
            </tr>
            <tr>
                <th scope="row">
                    <div class="d-flex align-items-center">
                        <span class="avatar avatar-xs me-2 online avatar-rounded">
                            <img src="../assets/images/faces/5.jpg" alt="img">
                        </span>Samantha Julia
                    </div>
                </th>
                <td><span class="badge bg-success-transparent">Active</span></td>
                <td>julianasams143@gmail.com</td>
                <td>
                    <div class="hstack gap-2 flex-wrap">
                        <a href="javascript:void(0);" class="text-info fs-14 lh-1"><i
                                class="ri-edit-line"></i></a>
                        <a href="javascript:void(0);" class="text-danger fs-14 lh-1"><i
                                class="ri-delete-bin-5-line"></i></a>
                    </div>
                </td>
            </tr>
        </tbody>
    </table>
</div>

Bordered Primary

Order	Date	Customer	Action
#0007	26-04-2022	Mayor Kelly	Booked
#0008	15-02-2022	Wicky Kross	Booked
#0009	23-05-2022	Julia Cam	Booked

<div class="table-responsive">
    <table class="table text-nowrap table-bordered border-primary">
        <thead>
            <tr>
                <th scope="col">Order</th>
                <th scope="col">Date</th>
                <th scope="col">Customer</th>
                <th scope="col">Action</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th scope="row">
                    #0007
                </th>
                <td>
                    <span class="badge bg-light text-dark">26-04-2022</span>
                </td>
                <td>
                    <div class="d-flex align-items-center">
                        <span class="avatar avatar-xs me-2 online avatar-rounded">
                            <img src="../assets/images/faces/3.jpg" alt="img">
                        </span>Mayor Kelly
                    </div>
                </td>
                <td><span class="badge bg-primary-transparent">Booked</span></td>
            </tr>
            <tr>
                <th scope="row">
                    #0008
                </th>
                <td>
                    <span class="badge bg-light text-dark">15-02-2022</span>
                </td>
                <td>
                    <div class="d-flex align-items-center">
                        <span class="avatar avatar-xs me-2 online avatar-rounded">
                            <img src="../assets/images/faces/6.jpg" alt="img">
                        </span>Wicky Kross
                    </div>
                </td>
                <td><span class="badge bg-primary-transparent">Booked</span></td>
            </tr>
            <tr>
                <th scope="row">
                    #0009
                </th>
                <td>
                    <span class="badge bg-light text-dark">23-05-2022</span>
                </td>
                <td>
                    <div class="d-flex align-items-center">
                        <span class="avatar avatar-xs me-2 online avatar-rounded">
                            <img src="../assets/images/faces/1.jpg" alt="img">
                        </span>Julia Cam
                    </div>
                </td>
                <td><span class="badge bg-primary-transparent">Booked</span></td>
            </tr>

        </tbody>
    </table>
</div>

Bordered Success

Order	Date	Customer	Status
#0011	07-01-2022	Helsenky	Delivered
#0012	18-05-2022	Brodus	Delivered
#0013	19-03-2022	Chikka Alen	Delivered

<div class="table-responsive">
    <table class="table text-nowrap table-bordered border-success">
        <thead>
            <tr>
                <th scope="col">Order</th>
                <th scope="col">Date</th>
                <th scope="col">Customer</th>
                <th scope="col">Status</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th scope="row">
                    #0011
                </th>
                <td>
                    <span class="badge bg-light text-dark">07-01-2022</span>
                </td>
                <td>
                    <div class="d-flex align-items-center">
                        <span class="avatar avatar-xs me-2 online avatar-rounded">
                            <img src="../assets/images/faces/10.jpg" alt="img">
                        </span>Helsenky
                    </div>
                </td>
                <td><span class="badge bg-success-transparent">Delivered</span></td>
            </tr>
            <tr>
                <th scope="row">
                    #0012
                </th>
                <td>
                    <span class="badge bg-light text-dark">18-05-2022</span>
                </td>
                <td>
                    <div class="d-flex align-items-center">
                        <span class="avatar avatar-xs me-2 online avatar-rounded">
                            <img src="../assets/images/faces/14.jpg" alt="img">
                        </span>Brodus
                    </div>
                </td>
                <td><span class="badge bg-success-transparent">Delivered</span></td>
            </tr>
            <tr>
                <th scope="row">
                    #0013
                </th>
                <td>
                    <span class="badge bg-light text-dark">19-03-2022</span>
                </td>
                <td>
                    <div class="d-flex align-items-center">
                        <span class="avatar avatar-xs me-2 online avatar-rounded">
                            <img src="../assets/images/faces/12.jpg" alt="img">
                        </span>Chikka Alen
                    </div>
                </td>
                <td><span class="badge bg-success-transparent">Delivered</span></td>
            </tr>
        </tbody>
    </table>
</div>

Bordered warning

Order	Date	Customer	Action
#0014	21-02-2022	Sukuro Kim	Accepted
#0018	26-03-2022	Alex Carey	Accepted
#0020	14-03-2022	Pamila Anderson	Accepted

<div class="table-responsive">
    <table class="table text-nowrap table-bordered border-warning">
        <thead>
            <tr>
                <th scope="col">Order</th>
                <th scope="col">Date</th>
                <th scope="col">Customer</th>
                <th scope="col">Action</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th scope="row">
                    #0014
                </th>
                <td>
                    <span class="badge bg-light text-dark">21-02-2022</span>
                </td>
                <td>
                    <div class="d-flex align-items-center">
                        <span class="avatar avatar-xs me-2 online avatar-rounded">
                            <img src="../assets/images/faces/13.jpg" alt="img">
                        </span>Sukuro Kim
                    </div>
                </td>
                <td><span class="badge bg-warning-transparent">Accepted</span></td>
            </tr>
            <tr>
                <th scope="row">
                    #0018
                </th>
                <td>
                    <span class="badge bg-light text-dark">26-03-2022</span>
                </td>
                <td>
                    <div class="d-flex align-items-center">
                        <span class="avatar avatar-xs me-2 online avatar-rounded">
                            <img src="../assets/images/faces/11.jpg" alt="img">
                        </span>Alex Carey
                    </div>
                </td>
                <td><span class="badge bg-warning-transparent">Accepted</span></td>
            </tr>
            <tr>
                <th scope="row">
                    #0020
                </th>
                <td>
                    <span class="badge bg-light text-dark">14-03-2022</span>
                </td>
                <td>
                    <div class="d-flex align-items-center">
                        <span class="avatar avatar-xs me-2 online avatar-rounded">
                            <img src="../assets/images/faces/2.jpg" alt="img">
                        </span>Pamila Anderson
                    </div>
                </td>
                <td><span class="badge bg-warning-transparent">Accepted</span></td>
            </tr>
        </tbody>
    </table>
</div>

Table Without Borders

User Name	Transaction Id	Created	Status
Harshrath	#5182-3467	24 May 2022	Fixed
Zozo Hadid	#5182-3412	02 July 2022	In Progress
Martiana	#5182-3423	15 April 2022	Completed
Alex Carey	#5182-3456	17 March 2022	Pending

<div class="table-responsive">
    <table class="table text-nowrap table-borderless">
        <thead>
            <tr>
                <th scope="col">User Name</th>
                <th scope="col">Transaction Id</th>
                <th scope="col">Created</th>
                <th scope="col">Status</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th scope="row">Harshrath</th>
                <td>#5182-3467</td>
                <td>24 May 2022</td>
                <td><span class="badge bg-primary">Fixed</span></td>
            </tr>
            <tr>
                <th scope="row">Zozo Hadid</th>
                <td>#5182-3412</td>
                <td>02 July 2022</td>
                <td><span class="badge bg-warning">In Progress</span></td>
            </tr>
            <tr>
                <th scope="row">Martiana</th>
                <td>#5182-3423</td>
                <td>15 April 2022</td>
                <td><span class="badge bg-success">Completed</span></td>
            </tr>
            <tr>
                <th scope="row">Alex Carey</th>
                <td>#5182-3456</td>
                <td>17 March 2022</td>
                <td><span class="badge bg-danger">Pending</span></td>
            </tr>
        </tbody>
    </table>
</div>

Table Group Divideres

Product	Seller	Sale Percentage	Qunatity Sold
Smart Watch	Slowtrack.inc	24.23%	250/1786
White Sneakers	American & Co.inc	12.45%	123/985
Baseball Bat	Sports Company	06.64%	124/232
Black Hoodie	Renonds Fabrics	14.42%	192/2456

<div class="table-responsive">
    <table class="table text-nowrap">
        <thead>
            <tr>
                <th scope="col">Product</th>
                <th scope="col">Seller</th>
                <th scope="col">Sale Percentage</th>
                <th scope="col">Qunatity Sold</th>
            </tr>
        </thead>
        <tbody class="table-group-divider">
            <tr>
                <th scope="row">Smart Watch</th>
                <td>Slowtrack.inc</td>
                <td><a href="#" class="text-success">24.23%<i
                            class="ri-arrow-up-fill ms-1"></i></a></td>
                <td>250/1786</td>
            </tr>
            <tr>
                <th scope="row">White Sneakers</th>
                <td>American & Co.inc</td>
                <td><a href="#" class="text-danger">12.45%<i
                            class="ri-arrow-down-fill ms-1"></i></a></td>
                <td>123/985</td>
            </tr>
            <tr>
                <th scope="row">Baseball Bat</th>
                <td>Sports Company</td>
                <td><a href="#" class="text-success">06.64%<i
                            class="ri-arrow-up-fill ms-1"></i></a></td>
                <td>124/232</td>
            </tr>
            <tr>
                <th scope="row">Black Hoodie</th>
                <td>Renonds Fabrics</td>
                <td><a href="#" class="text-success">14.42%<i
                            class="ri-arrow-up-fill ms-1"></i></a></td>
                <td>192/2456</td>
            </tr>
        </tbody>
    </table>
</div>

Striped rows

ID	Date	Customer
2022R-01	27-010-2022	Moracco
2022R-02	28-10-2022	Thornton
2022R-03	22-10-2022	Larry Bird
2022R-04	29-09-2022	Erica Sean

<div class="table-responsive">
    <table class="table text-nowrap table-striped">
        <thead>
            <tr>
                <th scope="col">ID</th>
                <th scope="col">Date</th>
                <th scope="col">Customer</th>
                <th scope="col">Action</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th scope="row">2022R-01</th>
                <td>27-010-2022</td>
                <td>Moracco</td>
                <td>
                    <button class="btn btn-sm btn-success btn-wave">
                        <i class="ri-download-2-line align-middle me-2 d-inline-block"></i>Download
                    </button>
                </td>
            </tr>
            <tr>
                <th scope="row">2022R-02</th>
                <td>28-10-2022</td>
                <td>Thornton</td>
                <td>
                    <button class="btn btn-sm btn-success btn-wave">
                        <i class="ri-download-2-line align-middle me-2 d-inline-block"></i>Download
                    </button>
                </td>
            </tr>
            <tr>
                <th scope="row">2022R-03</th>
                <td>22-10-2022</td>
                <td>Larry Bird</td>
                <td>
                    <button class="btn btn-sm btn-success btn-wave">
                        <i class="ri-download-2-line align-middle me-2 d-inline-block"></i>Download
                    </button>
                </td>
            </tr>
            <tr>
                <th scope="row">2022R-04</th>
                <td>29-09-2022</td>
                <td>Erica Sean</td>
                <td>
                    <button class="btn btn-sm btn-success btn-wave">
                        <i class="ri-download-2-line align-middle me-2 d-inline-block"></i>Download
                    </button>
                </td>
            </tr>
        </tbody>
    </table>
</div>

Striped columns

ID	Date	Customer
2022R-01	27-010-2022	Moracco
2022R-02	28-10-2022	Thornton
2022R-03	22-10-2022	Larry Bird
2022R-04	29-09-2022	Erica Sean

<div class="table-responsive">
    <table class="table text-nowrap table-striped-columns">
        <thead>
            <tr>
                <th scope="col">ID</th>
                <th scope="col">Date</th>
                <th scope="col">Customer</th>
                <th scope="col">Action</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th scope="row">2022R-01</th>
                <td>27-010-2022</td>
                <td>Moracco</td>
                <td>
                    <button class="btn btn-sm btn-danger btn-wave">
                        <i class="ri-delete-bin-line align-middle me-2 d-inline-block"></i>Delete
                    </button>
                </td>
            </tr>
            <tr>
                <th scope="row">2022R-02</th>
                <td>28-10-2022</td>
                <td>Thornton</td>
                <td>
                    <button class="btn btn-sm btn-danger btn-wave">
                        <i class="ri-delete-bin-line align-middle me-2 d-inline-block"></i>Delete
                    </button>
                </td>
            </tr>
            <tr>
                <th scope="row">2022R-03</th>
                <td>22-10-2022</td>
                <td>Larry Bird</td>
                <td>
                    <button class="btn btn-sm btn-danger btn-wave">
                        <i class="ri-delete-bin-line align-middle me-2 d-inline-block"></i>Delete
                    </button>
                </td>
            </tr>
            <tr>
                <th scope="row">2022R-04</th>
                <td>29-09-2022</td>
                <td>Erica Sean</td>
                <td>
                    <button class="btn btn-sm btn-danger btn-wave">
                        <i class="ri-delete-bin-line align-middle me-2 d-inline-block"></i>Delete
                    </button>
                </td>
            </tr>
        </tbody>
    </table>
</div>

Primary Table

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird	Thornton	@twitter

<div class="table-responsive">
    <table class="table text-nowrap table-primary">
        <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 the Bird</td>
                <td>Thornton</td>
                <td>@twitter</td>
            </tr>
        </tbody>
    </table>
</div>

Secondary Table

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird	Thornton	@twitter

<div class="table-responsive">
    <table class="table text-nowrap table-secondary">
        <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 the Bird</td>
                <td>Thornton</td>
                <td>@twitter</td>
            </tr>
        </tbody>
    </table>
</div>

Warning Table

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird	Thornton	@twitter

<div class="table-responsive">
    <table class="table text-nowrap table-warning">
        <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 the Bird</td>
                <td>Thornton</td>
                <td>@twitter</td>
            </tr>
        </tbody>
    </table>
</div>

Danger Table

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird	Thornton	@twitter

<div class="table-responsive">
    <table class="table text-nowrap table-danger">
        <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 the Bird</td>
                <td>Thornton</td>
                <td>@twitter</td>
            </tr>
        </tbody>
    </table>
</div>

Dark Table

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird	Thornton	@twitter

<div class="table-responsive">
    <table class="table text-nowrap 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 the Bird</td>
                <td>Thornton</td>
                <td>@twitter</td>
            </tr>
        </tbody>
    </table>
</div>

Success Table With Striped Rows

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird	Thornton	@twitter

<div class="table-responsive">
    <table class="table text-nowrap table-success table-striped">
        <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 the Bird</td>
                <td>Thornton</td>
                <td>@twitter</td>
            </tr>
        </tbody>
    </table>
</div>

Hoverable Rows

Product Manager	Category	Team
Joanna Smith joannasmith14@gmail.com	Fashion	+5
Kara Kova milesakara@gmail.com	Clothing	+6
Donald Trimb donaldo21@gmail.com	Electronics	+2
Justin Gaethje justingae@gmail.com	Sports	+5

<div class="table-responsive">
    <table class="table text-nowrap table-hover">
        <thead>
            <tr>
                <th scope="col">Product Manager</th>
                <th scope="col">Category</th>
                <th scope="col">Team</th>
                <th scope="col">Status</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>
                    <div class="d-flex align-items-center">
                        <div class="avatar avatar-sm me-2 avatar-rounded">
                            <img src="../assets/images/faces/10.jpg" alt="img">
                        </div>
                        <div>
                            <div class="lh-1">
                                <span>Joanna Smith</span>
                            </div>
                            <div class="lh-1">
                                <span
                                    class="fs-11 text-muted">joannasmith14@gmail.com</span>
                            </div>
                        </div>
                    </div>
                </td>
                <td><span class="badge bg-primary-transparent">Fashion</span></td>
                <td>
                    <div class="avatar-list-stacked">
                        <span class="avatar avatar-sm avatar-rounded">
                            <img src="../assets/images/faces/2.jpg" alt="img">
                        </span>
                        <span class="avatar avatar-sm avatar-rounded">
                            <img src="../assets/images/faces/8.jpg" alt="img">
                        </span>
                        <span class="avatar avatar-sm avatar-rounded">
                            <img src="../assets/images/faces/2.jpg" alt="img">
                        </span>
                        <a class="avatar avatar-sm bg-primary text-fixed-white avatar-rounded"
                            href="javascript:void(0);">
                            +5
                        </a>
                    </div>
                </td>
                <td>
                    <div class="progress progress-xs">
                        <div class="progress-bar bg-primary" role="progressbar"
                            style="width: 52%" aria-valuenow="52" aria-valuemin="0"
                            aria-valuemax="100">
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    <div class="d-flex align-items-center">
                        <div class="avatar avatar-sm me-2 avatar-rounded">
                            <img src="../assets/images/faces/2.jpg" alt="img">
                        </div>
                        <div>
                            <div class="lh-1">
                                <span>Kara Kova</span>
                            </div>
                            <div class="lh-1">
                                <span
                                    class="fs-11 text-muted">milesakara@gmail.com</span>
                            </div>
                        </div>
                    </div>
                </td>
                <td><span class="badge bg-warning-transparent">Clothing</span></td>
                <td>
                    <div class="avatar-list-stacked">
                        <span class="avatar avatar-sm avatar-rounded">
                            <img src="../assets/images/faces/4.jpg" alt="img">
                        </span>
                        <span class="avatar avatar-sm avatar-rounded">
                            <img src="../assets/images/faces/6.jpg" alt="img">
                        </span>
                        <a class="avatar avatar-sm bg-primary text-fixed-white avatar-rounded"
                            href="javascript:void(0);">
                            +6
                        </a>
                    </div>
                </td>
                <td>
                    <div class="progress progress-xs">
                        <div class="progress-bar bg-primary" role="progressbar"
                            style="width: 40%" aria-valuenow="40" aria-valuemin="0"
                            aria-valuemax="100">
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    <div class="d-flex align-items-center">
                        <div class="avatar avatar-sm me-2 avatar-rounded">
                            <img src="../assets/images/faces/16.jpg" alt="img">
                        </div>
                        <div>
                            <div class="lh-1">
                                <span>Donald Trimb</span>
                            </div>
                            <div class="lh-1">
                                <span
                                    class="fs-11 text-muted">donaldo21@gmail.com</span>
                            </div>
                        </div>
                    </div>
                </td>
                <td><span class="badge bg-dark-transparent">Electronics</span></td>
                <td>
                    <div class="avatar-list-stacked">
                        <span class="avatar avatar-sm avatar-rounded">
                            <img src="../assets/images/faces/1.jpg" alt="img">
                        </span>
                        <span class="avatar avatar-sm avatar-rounded">
                            <img src="../assets/images/faces/11.jpg" alt="img">
                        </span>
                        <span class="avatar avatar-sm avatar-rounded">
                            <img src="../assets/images/faces/15.jpg" alt="img">
                        </span>
                        <a class="avatar avatar-sm bg-primary text-fixed-white avatar-rounded"
                            href="javascript:void(0);">
                            +2
                        </a>
                    </div>
                </td>
                <td>
                    <div class="progress progress-xs">
                        <div class="progress-bar bg-primary" role="progressbar"
                            style="width: 17%" aria-valuenow="17" aria-valuemin="0"
                            aria-valuemax="100">
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    <div class="d-flex align-items-center">
                        <div class="avatar avatar-sm me-2 avatar-rounded">
                            <img src="../assets/images/faces/13.jpg" alt="img">
                        </div>
                        <div>
                            <div class="lh-1">
                                <span>Justin Gaethje</span>
                            </div>
                            <div class="lh-1">
                                <span
                                    class="fs-11 text-muted">justingae@gmail.com</span>
                            </div>
                        </div>
                    </div>
                </td>
                <td><span class="badge bg-danger-transparent">Sports</span></td>
                <td>
                    <div class="avatar-list-stacked">
                        <span class="avatar avatar-sm avatar-rounded">
                            <img src="../assets/images/faces/4.jpg" alt="img">
                        </span>
                        <span class="avatar avatar-sm avatar-rounded">
                            <img src="../assets/images/faces/6.jpg" alt="img">
                        </span>
                        <a class="avatar avatar-sm bg-primary text-fixed-white avatar-rounded"
                            href="javascript:void(0);">
                            +5
                        </a>
                    </div>
                </td>
                <td>
                    <div class="progress progress-xs">
                        <div class="progress-bar bg-primary" role="progressbar"
                            style="width: 72%" aria-valuenow="72" aria-valuemin="0"
                            aria-valuemax="100">
                        </div>
                    </div>
                </td>
            </tr>
        </tbody>
    </table>
</div>

Hoverable rows With striped rows

Invoice	Customer	Status	Date
IN-2032	Mark Cruise markcruise24@gmail.com	Paid	Jul 26,2022
IN-2022	Charanjeep charanjeep@gmail.in	Paid	Mar 14,2022
IN-2014	Samantha Julie julie453@gmail.com	Cancelled	Feb 1,2022
IN-2036	Simon Cohen simon@gmail.com	Refunded	Apr 24,2022

<div class="table-responsive">
    <table class="table text-nowrap table-striped table-hover">
        <thead>
            <tr>
                <th scope="col">Invoice</th>
                <th scope="col">Customer</th>
                <th scope="col">Status</th>
                <th scope="col">Date</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th scope="row">IN-2032</th>
                <td>
                    <div class="d-flex align-items-center">
                        <div class="avatar avatar-sm me-2 avatar-rounded">
                            <img src="../assets/images/faces/15.jpg" alt="img">
                        </div>
                        <div>
                            <div class="lh-1">
                                <span>Mark Cruise</span>
                            </div>
                            <div class="lh-1">
                                <span
                                    class="fs-11 text-muted">markcruise24@gmail.com</span>
                            </div>
                        </div>
                    </div>
                </td>
                <td><span class="badge bg-success-transparent"><i
                            class="ri-check-fill align-middle me-1"></i>Paid</span></td>
                <td>Jul 26,2022</td>
            </tr>
            <tr>
                <th scope="row">IN-2022</th>
                <td>
                    <div class="d-flex align-items-center">
                        <div class="avatar avatar-sm me-2 avatar-rounded">
                            <img src="../assets/images/faces/12.jpg" alt="img">
                        </div>
                        <div>
                            <div class="lh-1">
                                <span>Charanjeep</span>
                            </div>
                            <div class="lh-1">
                                <span
                                    class="fs-11 text-muted">charanjeep@gmail.in</span>
                            </div>
                        </div>
                    </div>
                </td>
                <td><span class="badge bg-success-transparent"><i
                            class="ri-check-fill align-middle me-1"></i>Paid</span></td>
                <td>Mar 14,2022</td>
            </tr>
            <tr>
                <th scope="row">IN-2014</th>
                <td>
                    <div class="d-flex align-items-center">
                        <div class="avatar avatar-sm me-2 avatar-rounded">
                            <img src="../assets/images/faces/5.jpg" alt="img">
                        </div>
                        <div>
                            <div class="lh-1">
                                <span>Samantha Julie</span>
                            </div>
                            <div class="lh-1">
                                <span class="fs-11 text-muted">julie453@gmail.com</span>
                            </div>
                        </div>
                    </div>
                </td>
                <td><span class="badge bg-danger-transparent"><i
                            class="ri-close-fill align-middle me-1"></i>Cancelled</span>
                </td>
                <td>Feb 1,2022</td>
            </tr>
            <tr>
                <th scope="row">IN-2036</th>
                <td>
                    <div class="d-flex align-items-center">
                        <div class="avatar avatar-sm me-2 avatar-rounded">
                            <img src="../assets/images/faces/11.jpg" alt="img">
                        </div>
                        <div>
                            <div class="lh-1">
                                <span>Simon Cohen</span>
                            </div>
                            <div class="lh-1">
                                <span class="fs-11 text-muted">simon@gmail.com</span>
                            </div>
                        </div>
                    </div>
                </td>
                <td><span class="badge bg-light text-dark"><i
                            class="ri-reply-line align-middle me-1"></i>Refunded</span>
                </td>
                <td>Apr 24,2022</td>
            </tr>
        </tbody>
    </table>
</div>

Table Head Primary

User Name	Transaction Id	Created
Harshrath	#5182-3467	24 May 2022
Zozo Hadid	#5182-3412	02 July 2022
Martiana	#5182-3423	15 April 2022
Alex Carey	#5182-3456	17 March 2022

<div class="table-responsive">
    <table class="table text-nowrap">
        <thead class="table-primary">
            <tr>
                <th scope="col">User Name</th>
                <th scope="col">Transaction Id</th>
                <th scope="col">Created</th>
                <th scope="col">Status</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th scope="row">Harshrath</th>
                <td>#5182-3467</td>
                <td>24 May 2022</td>
                <td>
                    <div class="hstack gap-2 fs-15">
                        <a href="javascript:void(0);"
                            class="btn btn-icon btn-sm btn-success-transparent rounded-pill"><i
                                class="ri-download-2-line"></i></a>
                        <a href="javascript:void(0);"
                            class="btn btn-icon btn-sm btn-info-transparent rounded-pill"><i
                                class="ri-edit-line"></i></a>
                        <a href="javascript:void(0);"
                            class="btn btn-icon btn-sm btn-danger-transparent rounded-pill"><i
                                class="ri-delete-bin-line"></i></a>
                    </div>
                </td>
            </tr>
            <tr>
                <th scope="row">Zozo Hadid</th>
                <td>#5182-3412</td>
                <td>02 July 2022</td>
                <td>
                    <div class="hstack gap-2 fs-15">
                        <a href="javascript:void(0);"
                            class="btn btn-icon btn-sm btn-success-transparent rounded-pill"><i
                                class="ri-download-2-line"></i></a>
                        <a href="javascript:void(0);"
                            class="btn btn-icon btn-sm btn-info-transparent rounded-pill"><i
                                class="ri-edit-line"></i></a>
                        <a href="javascript:void(0);"
                            class="btn btn-icon btn-sm btn-danger-transparent rounded-pill"><i
                                class="ri-delete-bin-line"></i></a>
                    </div>
                </td>
            </tr>
            <tr>
                <th scope="row">Martiana</th>
                <td>#5182-3423</td>
                <td>15 April 2022</td>
                <td>
                    <div class="hstack gap-2 fs-15">
                        <a href="javascript:void(0);"
                            class="btn btn-icon btn-sm btn-success-transparent rounded-pill"><i
                                class="ri-download-2-line"></i></a>
                        <a href="javascript:void(0);"
                            class="btn btn-icon btn-sm btn-info-transparent rounded-pill"><i
                                class="ri-edit-line"></i></a>
                        <a href="javascript:void(0);"
                            class="btn btn-icon btn-sm btn-danger-transparent rounded-pill"><i
                                class="ri-delete-bin-line"></i></a>
                    </div>
                </td>
            </tr>
            <tr>
                <th scope="row">Alex Carey</th>
                <td>#5182-3456</td>
                <td>17 March 2022</td>
                <td>
                    <div class="hstack gap-2 fs-15">
                        <a href="javascript:void(0);"
                            class="btn btn-icon btn-sm btn-success-transparent rounded-pill"><i
                                class="ri-download-2-line"></i></a>
                        <a href="javascript:void(0);"
                            class="btn btn-icon btn-sm btn-info-transparent rounded-pill"><i
                                class="ri-edit-line"></i></a>
                        <a href="javascript:void(0);"
                            class="btn btn-icon btn-sm btn-danger-transparent rounded-pill"><i
                                class="ri-delete-bin-line"></i></a>
                    </div>
                </td>
            </tr>
        </tbody>
    </table>
</div>

Table Head warning

User Name	Transaction Id	Created
Harshrath	#5182-3467	24 May 2022
Zozo Hadid	#5182-3412	02 July 2022
Martiana	#5182-3423	15 April 2022
Alex Carey	#5182-3456	17 March 2022

<div class="table-responsive">
    <table class="table text-nowrap">
        <thead class="table-warning">
            <tr>
                <th scope="col">User Name</th>
                <th scope="col">Transaction Id</th>
                <th scope="col">Created</th>
                <th scope="col">Status</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th scope="row">Harshrath</th>
                <td>#5182-3467</td>
                <td>24 May 2022</td>
                <td>
                    <button class="btn btn-sm btn-primary-light">Pending</button>
                </td>
            </tr>
            <tr>
                <th scope="row">Zozo Hadid</th>
                <td>#5182-3412</td>
                <td>02 July 2022</td>
                <td>
                    <button class="btn btn-sm btn-primary-light">Pending</button>
                </td>
            </tr>
            <tr>
                <th scope="row">Martiana</th>
                <td>#5182-3423</td>
                <td>15 April 2022</td>
                <td>
                    <button class="btn btn-sm btn-danger-light">Rejected</button>
                </td>
            </tr>
            <tr>
                <th scope="row">Alex Carey</th>
                <td>#5182-3456</td>
                <td>17 March 2022</td>
                <td>
                    <button class="btn btn-sm btn-success-light">Processed</button>
                </td>
            </tr>
        </tbody>
    </table>
</div>

Table Head Success

User Name	Transaction Id	Created
Harshrath	#5182-3467	24 May 2022
Zozo Hadid	#5182-3412	02 July 2022
Martiana	#5182-3423	15 April 2022
Alex Carey	#5182-3456	17 March 2022

<div class="table-responsive">
    <table class="table text-nowrap">
        <thead class="table-success">
            <tr>
                <th scope="col">User Name</th>
                <th scope="col">Transaction Id</th>
                <th scope="col">Created</th>
                <th scope="col">Status</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th scope="row">Harshrath</th>
                <td>#5182-3467</td>
                <td>24 May 2022</td>
                <td>
                    <button class="btn btn-sm btn-primary-light">Pending</button>
                </td>
            </tr>
            <tr>
                <th scope="row">Zozo Hadid</th>
                <td>#5182-3412</td>
                <td>02 July 2022</td>
                <td>
                    <button class="btn btn-sm btn-primary-light">Pending</button>
                </td>
            </tr>
            <tr>
                <th scope="row">Martiana</th>
                <td>#5182-3423</td>
                <td>15 April 2022</td>
                <td>
                    <button class="btn btn-sm btn-danger-light">Rejected</button>
                </td>
            </tr>
            <tr>
                <th scope="row">Alex Carey</th>
                <td>#5182-3456</td>
                <td>17 March 2022</td>
                <td>
                    <button class="btn btn-sm btn-success-light">Processed</button>
                </td>
            </tr>
        </tbody>
    </table>
</div>

Table Head Info

User Name	Transaction Id	Created
Harshrath	#5182-3467	24 May 2022
Zozo Hadid	#5182-3412	02 July 2022
Martiana	#5182-3423	15 April 2022
Alex Carey	#5182-3456	17 March 2022

<div class="table-responsive">
    <table class="table text-nowrap">
        <thead class="table-info">
            <tr>
                <th scope="col">User Name</th>
                <th scope="col">Transaction Id</th>
                <th scope="col">Created</th>
                <th scope="col">Status</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th scope="row">Harshrath</th>
                <td>#5182-3467</td>
                <td>24 May 2022</td>
                <td>
                    <button class="btn btn-sm btn-primary-light">Pending</button>
                </td>
            </tr>
            <tr>
                <th scope="row">Zozo Hadid</th>
                <td>#5182-3412</td>
                <td>02 July 2022</td>
                <td>
                    <button class="btn btn-sm btn-primary-light">Pending</button>
                </td>
            </tr>
            <tr>
                <th scope="row">Martiana</th>
                <td>#5182-3423</td>
                <td>15 April 2022</td>
                <td>
                    <button class="btn btn-sm btn-danger-light">Rejected</button>
                </td>
            </tr>
            <tr>
                <th scope="row">Alex Carey</th>
                <td>#5182-3456</td>
                <td>17 March 2022</td>
                <td>
                    <button class="btn btn-sm btn-success-light">Processed</button>
                </td>
            </tr>
        </tbody>
    </table>
</div>

Table Head Secondary

User Name	Transaction Id	Created
Harshrath	#5182-3467	24 May 2022
Zozo Hadid	#5182-3412	02 July 2022
Martiana	#5182-3423	15 April 2022
Alex Carey	#5182-3456	17 March 2022

<div class="table-responsive">
    <table class="table text-nowrap">
        <thead class="table-secondary">
            <tr>
                <th scope="col">User Name</th>
                <th scope="col">Transaction Id</th>
                <th scope="col">Created</th>
                <th scope="col">Status</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th scope="row">Harshrath</th>
                <td>#5182-3467</td>
                <td>24 May 2022</td>
                <td>
                    <button class="btn btn-sm btn-primary-light">Pending</button>
                </td>
            </tr>
            <tr>
                <th scope="row">Zozo Hadid</th>
                <td>#5182-3412</td>
                <td>02 July 2022</td>
                <td>
                    <button class="btn btn-sm btn-primary-light">Pending</button>
                </td>
            </tr>
            <tr>
                <th scope="row">Martiana</th>
                <td>#5182-3423</td>
                <td>15 April 2022</td>
                <td>
                    <button class="btn btn-sm btn-danger-light">Rejected</button>
                </td>
            </tr>
            <tr>
                <th scope="row">Alex Carey</th>
                <td>#5182-3456</td>
                <td>17 March 2022</td>
                <td>
                    <button class="btn btn-sm btn-success-light">Processed</button>
                </td>
            </tr>
        </tbody>
    </table>
</div>

Table Head Danger

User Name	Transaction Id	Created
Harshrath	#5182-3467	24 May 2022
Zozo Hadid	#5182-3412	02 July 2022
Martiana	#5182-3423	15 April 2022
Alex Carey	#5182-3456	17 March 2022

<div class="table-responsive">
    <table class="table text-nowrap">
        <thead class="table-danger">
            <tr>
                <th scope="col">User Name</th>
                <th scope="col">Transaction Id</th>
                <th scope="col">Created</th>
                <th scope="col">Status</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th scope="row">Harshrath</th>
                <td>#5182-3467</td>
                <td>24 May 2022</td>
                <td>
                    <button class="btn btn-sm btn-primary-light">Pending</button>
                </td>
            </tr>
            <tr>
                <th scope="row">Zozo Hadid</th>
                <td>#5182-3412</td>
                <td>02 July 2022</td>
                <td>
                    <button class="btn btn-sm btn-primary-light">Pending</button>
                </td>
            </tr>
            <tr>
                <th scope="row">Martiana</th>
                <td>#5182-3423</td>
                <td>15 April 2022</td>
                <td>
                    <button class="btn btn-sm btn-danger-light">Rejected</button>
                </td>
            </tr>
            <tr>
                <th scope="row">Alex Carey</th>
                <td>#5182-3456</td>
                <td>17 March 2022</td>
                <td>
                    <button class="btn btn-sm btn-success-light">Processed</button>
                </td>
            </tr>
        </tbody>
    </table>
</div>

Table Foot

S.No	Team	Matches Won	Win Ratio
01	Manchester	232	42%
02	Barcelona	175	58%
03	Portugal	126	32%
Total	United States	558	56%

<div class="table-responsive">
    <table class="table text-nowrap">
        <thead class="table-primary">
            <tr>
                <th scope="col">S.No</th>
                <th scope="col">Team</th>
                <th scope="col">Matches Won</th>
                <th scope="col">Win Ratio</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th scope="row">
                    01
                </th>
                <td>
                    Manchester
                </td>
                <td>
                    232
                </td>
                <td>
                    <span class="badge bg-primary">42%</span>
                </td>
            </tr>
            <tr>
                <th scope="row">
                    02
                </th>
                <td>
                    Barcelona
                </td>
                <td>
                    175
                </td>
                <td><span class="badge bg-primary">58%</span></td>
            </tr>
            <tr>
                <th scope="row">
                    03
                </th>
                <td>
                    Portugal
                </td>
                <td>
                    126
                </td>
                <td><span class="badge bg-primary">32%</span></td>
            </tr>
        </tbody>
        <tfoot class="table-primary">
            <tr>
                <th scope="row">
                    Total
                </th>
                <td>
                    United States
                </td>
                <td>
                    558
                </td>
                <td><span class="badge bg-primary">56%</span></td>
            </tr>
        </tfoot>
    </table>
</div>

Table With Caption

Top 3 Countries
S.No	Country	Medals Won	No Of Athletes
01	United States	2012	1823
02	United Kingdom	1012	992
03	Germany	914	875

<div class="table-responsive">
    <table class="table text-nowrap">
        <thead class="table-primary">
            <tr>
                <th scope="col">S.No</th>
                <th scope="col">Team</th>
                <th scope="col">Matches Won</th>
                <th scope="col">Win Ratio</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th scope="row">
                    01
                </th>
                <td>
                    Manchester
                </td>
                <td>
                    232
                </td>
                <td>
                    <span class="badge bg-primary">42%</span>
                </td>
            </tr>
            <tr>
                <th scope="row">
                    02
                </th>
                <td>
                    Barcelona
                </td>
                <td>
                    175
                </td>
                <td><span class="badge bg-primary">58%</span></td>
            </tr>
            <tr>
                <th scope="row">
                    03
                </th>
                <td>
                    Portugal
                </td>
                <td>
                    126
                </td>
                <td><span class="badge bg-primary">32%</span></td>
            </tr>
        </tbody>
        <tfoot class="table-primary">
            <tr>
                <th scope="row">
                    Total
                </th>
                <td>
                    United States
                </td>
                <td>
                    558
                </td>
                <td><span class="badge bg-primary">56%</span></td>
            </tr>
        </tfoot>
    </table>
</div>

Table With Top Caption

Top IT Companies
S.No	Name	Revenue	Country
1	Microsoft	$170 billion	United States
2	HP	$72 billion	United States
3	IBM	$60 billion	United States

<div class="table-responsive">
    <table class="table text-nowrap caption-top">
        <caption>Top IT Companies</caption>
        <thead>
            <tr>
                <th scope="col">S.No</th>
                <th scope="col">Name</th>
                <th scope="col">Revenue</th>
                <th scope="col">Country</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th scope="row">1</th>
                <td>Microsoft</td>
                <td>$170 billion</td>
                <td>United States</td>
            </tr>
            <tr>
                <th scope="row">2</th>
                <td>HP</td>
                <td>$72 billion</td>
                <td>United States</td>
            </tr>
            <tr>
                <th scope="row">3</th>
                <td>IBM</td>
                <td>$60 billion</td>
                <td>United States</td>
            </tr>
        </tbody>
    </table>
</div>

Active Tables

Name	Created On	Number	Status
Mark	21,Dec 2021	+1234-12340	Completed
Monika	29,April 2022	+1523-12459	Failed
Madina	30,Nov 2022	+1982-16234	Successful
Bhamako	18,Mar 2022	+1526-10729	Pending

<div class="table-responsive">
    <table class="table text-nowrap">
        <thead>
            <tr>
                <th scope="col">Name</th>
                <th scope="col">Created On</th>
                <th scope="col">Number</th>
                <th scope="col">Status</th>
            </tr>
        </thead>
        <tbody>
            <tr class="table-active">
                <th scope="row">Mark</th>
                <td>21,Dec 2021</td>
                <td>+1234-12340</td>
                <td><span class="badge bg-primary">Completed</span></td>
            </tr>
            <tr>
                <th scope="row">Monika</th>
                <td>29,April 2022</td>
                <td>+1523-12459</td>
                <td><span class="badge bg-warning">Failed</span></td>
            </tr>
            <tr>
                <th scope="row">Madina</th>
                <td>30,Nov 2022</td>
                <td class="table-active">+1982-16234</td>
                <td><span class="badge bg-success">Successful</span></td>
            </tr>
            <tr>
                <th scope="row">Bhamako</th>
                <td>18,Mar 2022</td>
                <td>+1526-10729</td>
                <td><span class="badge bg-secondary">Pending</span></td>
            </tr>
        </tbody>
    </table>
</div>

Small Tables

Invoice	Created Date	Status
Zelensky	25-Apr-2021	Paid
Kim Jong	29-April-2022	Pending
Obana	30-Nov-2022	Paid
Sean Paul	01-Jan-2022	Paid
Karizma	14-Feb-2022	Pending

<div class="table-responsive">
    <table class="table text-nowrap table-sm">
        <thead>
            <tr>
                <th scope="col">Invoice</th>
                <th scope="col">Created Date</th>
                <th scope="col">Status</th>
                <th scope="col">Action</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th scope="row">
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" value="" id="checkebox-sm" checked="">
                        <label class="form-check-label" for="checkebox-sm">
                            Zelensky
                        </label>
                    </div>
                </th>
                <td>25-Apr-2021</td>
                <td><span class="badge bg-success-transparent">Paid</span></td>
                <td>
                    <div class="hstack gap-2 fs-15">
                        <a href="javascript:void(0);" class="btn btn-icon btn-sm btn-light"><i class="ri-download-2-line"></i></a>
                        <a href="javascript:void(0);" class="btn btn-icon btn-sm btn-light"><i class="ri-edit-line"></i></a>
                    </div>
                </td>
            </tr>
            <tr>
                <th scope="row">
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" value="" id="checkebox-sm1">
                        <label class="form-check-label" for="checkebox-sm1">
                            Kim Jong
                        </label>
                    </div>
                </th>
                <td>29-April-2022</td>
                <td><span class="badge bg-danger-transparent">Pending</span></td>
                <td>
                    <div class="hstack gap-2 fs-15">
                        <a href="javascript:void(0);" class="btn btn-icon btn-sm btn-light"><i class="ri-download-2-line"></i></a>
                        <a href="javascript:void(0);" class="btn btn-icon btn-sm btn-light"><i class="ri-edit-line"></i></a>
                    </div>
                </td>
            </tr>
            <tr>
                <th scope="row">
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" value="" id="checkebox-sm2">
                        <label class="form-check-label" for="checkebox-sm2">
                            Obana
                        </label>
                    </div>
                </th>
                <td>30-Nov-2022</td>
                <td><span class="badge bg-success-transparent">Paid</span></td>
                <td>
                    <div class="hstack gap-2 fs-15">
                        <a href="javascript:void(0);" class="btn btn-icon btn-sm btn-light"><i class="ri-download-2-line"></i></a>
                        <a href="javascript:void(0);" class="btn btn-icon btn-sm btn-light"><i class="ri-edit-line"></i></a>
                    </div>
                </td>
            </tr>
            <tr>
                <th scope="row">
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" value="" id="checkebox-sm3">
                        <label class="form-check-label" for="checkebox-sm3">
                            Sean Paul
                        </label>
                    </div>
                </th>
                <td>01-Jan-2022</td>
                <td><span class="badge bg-success-transparent">Paid</span></td>
                <td>
                    <div class="hstack gap-2 fs-15">
                        <a href="javascript:void(0);" class="btn btn-icon btn-sm btn-light"><i class="ri-download-2-line"></i></a>
                        <a href="javascript:void(0);" class="btn btn-icon btn-sm btn-light"><i class="ri-edit-line"></i></a>
                    </div>
                </td>
            </tr>
            <tr>
                <th scope="row">
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" value="" id="checkebox-sm4">
                        <label class="form-check-label" for="checkebox-sm4">
                            Karizma
                        </label>
                    </div>
                </th>
                <td>14-Feb-2022</td>
                <td><span class="badge bg-danger-transparent">Pending</span></td>
                <td>
                    <div class="hstack gap-2 fs-15">
                        <a href="javascript:void(0);" class="btn btn-icon btn-sm btn-light"><i class="ri-download-2-line"></i></a>
                        <a href="javascript:void(0);" class="btn btn-icon btn-sm btn-light"><i class="ri-edit-line"></i></a>
                    </div>
                </td>
            </tr>
        </tbody>
    </table>
</div>

Color variants tables

Color	Client	State	Quantity	Total Price
Default	Rita Book	Processed	22	$2,012
Primary	Rhoda Report	Processed	22	$4,254
Secondary	Rita Book	Processed	26	$1,234
Success	Anne Teak	Processed	42	$2,623
Danger	Dee End	Processed	52	$32,132
Warning	Lee Nonmi	Processed	10	$1,434
Info	Lynne Gwistic	Processed	63	$1,854
Light	Fran Tick	Processed	05	$823
Dark	Polly Pipe	Processed	35	$1,832

<div class="table-responsive">
    <table class="table text-nowrap">
        <thead>
            <tr>
                <th scope="col">Color</th>
                <th scope="col">Client</th>
                <th scope="col">State</th>
                <th scope="col">Quantity</th>
                <th scope="col">Total Price</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th scope="row">Default</th>
                <td>Rita Book</td>
                <td><span class="badge bg-primary-transparent">Processed</span></td>
                <td>22</td>
                <td>$2,012</td>
            </tr>

            <tr class="table-primary">
                <th scope="row">Primary</th>
                <td>Rhoda Report</td>
                <td><span class="badge bg-primary">Processed</span></td>
                <td>22</td>
                <td>$4,254</td>
            </tr>
            <tr class="table-secondary">
                <th scope="row">Secondary</th>
                <td>Rita Book</td>
                <td><span class="badge bg-secondary">Processed</span></td>
                <td>26</td>
                <td>$1,234</td>
            </tr>
            <tr class="table-success">
                <th scope="row">Success</th>
                <td>Anne Teak</td>
                <td><span class="badge bg-success">Processed</span></td>
                <td>42</td>
                <td>$2,623</td>
            </tr>
            <tr class="table-danger">
                <th scope="row">Danger</th>
                <td>Dee End</td>
                <td><span class="badge bg-danger">Processed</span></td>
                <td>52</td>
                <td>$32,132</td>
            </tr>
            <tr class="table-warning">
                <th scope="row">Warning</th>
                <td>Lee Nonmi</td>
                <td><span class="badge bg-warning">Processed</span></td>
                <td>10</td>
                <td>$1,434</td>
            </tr>
            <tr class="table-info">
                <th scope="row">Info</th>
                <td>Lynne Gwistic</td>
                <td><span class="badge bg-info">Processed</span></td>
                <td>63</td>
                <td>$1,854</td>
            </tr>
            <tr class="table-light">
                <th scope="row">Light</th>
                <td>Fran Tick</td>
                <td><span class="badge bg-light text-dark">Processed</span></td>
                <td>05</td>
                <td>$823</td>
            </tr>
            <tr class="table-dark">
                <th scope="row">Dark</th>
                <td>Polly Pipe</td>
                <td><span class="badge bg-dark text-white">Processed</span></td>
                <td>35</td>
                <td>$1,832</td>
            </tr>
        </tbody>
    </table>
</div>

Nesting

First

Last

Handle

Mark

Otto

@mdo

Aplhabets	Users	Email
A	Dino King	dinoking231@gmail.com
B	Poppins sams	pops@gmail.com
C	Brian Shaw	swanbrian@gmail.com

Larry

the Bird

@twitter

Jimmy

the Ostrich

Dummy Text

Cobra Kai

the Snake

Another Name

<div class="table-responsive">
    <table class="table text-nowrap table-striped table-bordered">
        <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>
                <td colspan="4">
                    <table class="table text-nowrap mb-0">
                        <thead>
                            <tr>
                                <th scope="col">Aplhabets</th>
                                <th scope="col">Users</th>
                                <th scope="col">Email</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <th scope="row">A</th>
                                <td>Dino King</td>
                                <td>dinoking231@gmail.com</td>
                            </tr>
                            <tr>
                                <th scope="row">B</th>
                                <td>Poppins sams</td>
                                <td>pops@gmail.com</td>
                            </tr>
                            <tr>
                                <th scope="row">C</th>
                                <td>Brian Shaw</td>
                                <td>swanbrian@gmail.com</td>
                            </tr>
                        </tbody>
                    </table>
                </td>
            </tr>
            <tr>
                <th scope="row">3</th>
                <td>Larry</td>
                <td>the Bird</td>
                <td>@twitter</td>
            </tr>
            <tr>
                <th scope="row">4</th>
                <td>Jimmy</td>
                <td>the Ostrich</td>
                <td>Dummy Text</td>
            </tr>
            <tr>
                <th scope="row">5</th>
                <td>Cobra Kai</td>
                <td>the Snake</td>
                <td>Another Name</td>
            </tr>
        </tbody>
    </table>
</div>

Always responsive

Team Head	Category	Role	Gmail	Team	Revenue
Mayor Kelly	Manufacturer	Team Lead	mayorkrlly@gmail.com	+4	$10,984.29
Andrew Garfield	Managing Director	Director	andrewgarfield@gmail.com	+4	$1.4billion
Simon Cowel	Service Manager	Manager	simoncowel234@gmail.com	+10	$7,123.21
Mirinda Hers	Recruiter	Employee	mirindahers@gmail.com	+6	$2,325.45

<div class="table-responsive">
    <table class="table text-nowrap">
        <thead>
            <tr>
                <th scope="col"><input class="form-check-input" type="checkbox" id="checkboxNoLabel" value="" aria-label="..."></th>
                <th scope="col">Team Head</th>
                <th scope="col">Category</th>
                <th scope="col">Role</th>
                <th scope="col">Gmail</th>
                <th scope="col">Team</th>
                <th scope="col">Work Progress</th>
                <th scope="col">Revenue</th>
                <th scope="col">Action</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th scope="row"><input class="form-check-input" type="checkbox" id="checkboxNoLabel1" value="" aria-label="..."></th>
                <td>
                    <div class="d-flex align-items-center">
                        <span class="avatar avatar-xs me-2 online avatar-rounded">
                            <img src="../assets/images/faces/3.jpg" alt="img">
                        </span>Mayor Kelly
                    </div>
                </td>
                <td>Manufacturer</td>
                <td><span class="badge bg-primary-transparent">Team Lead</span></td>
                <td>mayorkrlly@gmail.com</td>
                <td>
                    <div class="avatar-list-stacked">
                        <span class="avatar avatar-sm avatar-rounded">
                            <img src="../assets/images/faces/2.jpg" alt="img">
                        </span>
                        <span class="avatar avatar-sm avatar-rounded">
                            <img src="../assets/images/faces/8.jpg" alt="img">
                        </span>
                        <span class="avatar avatar-sm avatar-rounded">
                            <img src="../assets/images/faces/2.jpg" alt="img">
                        </span>
                        <a class="avatar avatar-sm bg-primary text-fixed-white avatar-rounded" href="javascript:void(0);">
                            +4
                        </a>
                    </div>
                </td>
                <td>
                    <div class="progress progress-xs">
                        <div class="progress-bar bg-primary" role="progressbar" style="width: 52%" aria-valuenow="52" aria-valuemin="0" aria-valuemax="100">
                        </div>
                    </div>
                </td>
                <td>$10,984.29</td>
                <td>
                    <div class="hstack gap-2 fs-15">
                        <a href="javascript:void(0);" class="btn btn-icon btn-sm btn-success"><i class="ri-download-2-line"></i></a>
                        <a href="javascript:void(0);" class="btn btn-icon btn-sm btn-info"><i class="ri-edit-line"></i></a>
                    </div>
                </td>
            </tr>
            <tr>
                <th scope="row"><input class="form-check-input" type="checkbox" id="checkboxNoLabel2" value="" aria-label="..."></th>
                <td>
                    <div class="d-flex align-items-center">
                        <span class="avatar avatar-xs me-2 online avatar-rounded">
                            <img src="../assets/images/faces/12.jpg" alt="img">
                        </span>Andrew Garfield
                    </div>
                </td>
                <td>Managing Director</td>
                <td><span class="badge bg-warning-transparent">Director</span></td>
                <td>andrewgarfield@gmail.com</td>
                <td>
                    <div class="avatar-list-stacked">
                        <span class="avatar avatar-sm avatar-rounded">
                            <img src="../assets/images/faces/1.jpg" alt="img">
                        </span>
                        <span class="avatar avatar-sm avatar-rounded">
                            <img src="../assets/images/faces/5.jpg" alt="img">
                        </span>
                        <span class="avatar avatar-sm avatar-rounded">
                            <img src="../assets/images/faces/11.jpg" alt="img">
                        </span>
                        <span class="avatar avatar-sm avatar-rounded">
                            <img src="../assets/images/faces/15.jpg" alt="img">
                        </span>
                        <a class="avatar avatar-sm bg-primary text-fixed-white avatar-rounded" href="javascript:void(0);">
                            +4
                        </a>
                    </div>
                </td>
                <td>
                    <div class="progress progress-xs">
                        <div class="progress-bar bg-primary" role="progressbar" style="width: 91%" aria-valuenow="91" aria-valuemin="0" aria-valuemax="100">
                        </div>
                    </div>
                </td>
                <td>$1.4billion</td>
                <td>
                    <div class="hstack gap-2 fs-15">
                        <a href="javascript:void(0);" class="btn btn-icon btn-sm btn-success"><i class="ri-download-2-line"></i></a>
                        <a href="javascript:void(0);" class="btn btn-icon btn-sm btn-info"><i class="ri-edit-line"></i></a>
                    </div>
                </td>
            </tr>
            <tr>
                <th scope="row"><input class="form-check-input" type="checkbox" id="checkboxNoLabel3" value="" aria-label="..."></th>
                <td>
                    <div class="d-flex align-items-center">
                        <span class="avatar avatar-xs me-2 online avatar-rounded">
                            <img src="../assets/images/faces/14.jpg" alt="img">
                        </span>Simon Cowel
                    </div>
                </td>
                <td>Service Manager</td>
                <td><span class="badge bg-success-transparent">Manager</span></td>
                <td>simoncowel234@gmail.com</td>
                <td>
                    <div class="avatar-list-stacked">
                        <span class="avatar avatar-sm avatar-rounded">
                            <img src="../assets/images/faces/6.jpg" alt="img">
                        </span>
                        <span class="avatar avatar-sm avatar-rounded">
                            <img src="../assets/images/faces/16.jpg" alt="img">
                        </span>
                        <a class="avatar avatar-sm bg-primary text-fixed-white avatar-rounded" href="javascript:void(0);">
                            +10
                        </a>
                    </div>
                </td>
                <td>
                    <div class="progress progress-xs">
                        <div class="progress-bar bg-primary" role="progressbar" style="width: 45%" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100">
                        </div>
                    </div>
                </td>
                <td>$7,123.21</td>
                <td>
                    <div class="hstack gap-2 fs-15">
                        <a href="javascript:void(0);" class="btn btn-icon btn-sm btn-success"><i class="ri-download-2-line"></i></a>
                        <a href="javascript:void(0);" class="btn btn-icon btn-sm btn-info"><i class="ri-edit-line"></i></a>
                    </div>
                </td>
            </tr>
            <tr>
                <th scope="row"><input class="form-check-input" type="checkbox" id="checkboxNoLabel13" value="" aria-label="..."></th>
                <td>
                    <div class="d-flex align-items-center">
                        <span class="avatar avatar-xs me-2 online avatar-rounded">
                            <img src="../assets/images/faces/5.jpg" alt="img">
                        </span>Mirinda Hers
                    </div>
                </td>
                <td>Recruiter</td>
                <td><span class="badge bg-danger-transparent">Employee</span></td>
                <td>mirindahers@gmail.com</td>
                <td>
                    <div class="avatar-list-stacked">
                        <span class="avatar avatar-sm avatar-rounded">
                            <img src="../assets/images/faces/3.jpg" alt="img">
                        </span>
                        <span class="avatar avatar-sm avatar-rounded">
                            <img src="../assets/images/faces/10.jpg" alt="img">
                        </span>
                        <span class="avatar avatar-sm avatar-rounded">
                            <img src="../assets/images/faces/14.jpg" alt="img">
                        </span>
                        <a class="avatar avatar-sm bg-primary text-fixed-white avatar-rounded" href="javascript:void(0);">
                            +6
                        </a>
                    </div>
                </td>
                <td>
                    <div class="progress progress-xs">
                        <div class="progress-bar bg-primary" role="progressbar" style="width: 21%" aria-valuenow="21" aria-valuemin="0" aria-valuemax="100">
                        </div>
                    </div>
                </td>
                <td>$2,325.45</td>
                <td>
                    <div class="hstack gap-2 fs-15">
                        <a href="javascript:void(0);" class="btn btn-icon btn-sm btn-success"><i class="ri-download-2-line"></i></a>
                        <a href="javascript:void(0);" class="btn btn-icon btn-sm btn-info"><i class="ri-edit-line"></i></a>
                    </div>
                </td>
            </tr>
        </tbody>
    </table>
</div>

Vertical alignment

Heading 1	Heading 2	Heading 3	Heading 4
This cell inherits `vertical-align: middle;` from the table	This cell inherits `vertical-align: middle;` from the table	This cell inherits `vertical-align: middle;` from the table	This here is some placeholder text, intended to take up quite a bit of vertical space, to demonstrate how the vertical alignment works in the preceding cells.
This cell inherits `vertical-align: bottom;` from the table row	This cell inherits `vertical-align: bottom;` from the table row	This cell inherits `vertical-align: bottom;` from the table row	This here is some placeholder text, intended to take up quite a bit of vertical space, to demonstrate how the vertical alignment works in the preceding cells.
This cell inherits `vertical-align: middle;` from the table	This cell inherits `vertical-align: middle;` from the table	This cell is aligned to the top.	This here is some placeholder text, intended to take up quite a bit of vertical space, to demonstrate how the vertical alignment works in the preceding cells.

<div class="table-responsive">
    <table class="table align-middle">
        <thead>
            <tr>
                <th scope="col" class="w-25">Heading 1</th>
                <th scope="col" class="w-25">Heading 2</th>
                <th scope="col" class="w-25">Heading 3</th>
                <th scope="col" class="w-25">Heading 4</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>This cell inherits <code>vertical-align: middle;</code> from
                    the
                    table</td>
                <td>This cell inherits <code>vertical-align: middle;</code> from
                    the
                    table</td>
                <td>This cell inherits <code>vertical-align: middle;</code> from
                    the
                    table</td>
                <td>This here is some placeholder text, intended to take up
                    quite a
                    bit of vertical space, to demonstrate how the vertical
                    alignment
                    works in the preceding cells.</td>
            </tr>
            <tr class="align-bottom">
                <td>This cell inherits <code>vertical-align: bottom;</code> from
                    the
                    table row</td>
                <td>This cell inherits <code>vertical-align: bottom;</code> from
                    the
                    table row</td>
                <td>This cell inherits <code>vertical-align: bottom;</code> from
                    the
                    table row</td>
                <td>This here is some placeholder text, intended to take up
                    quite a
                    bit of vertical space, to demonstrate how the vertical
                    alignment
                    works in the preceding cells.</td>
            </tr>
            <tr>
                <td>This cell inherits <code>vertical-align: middle;</code> from
                    the
                    table</td>
                <td>This cell inherits <code>vertical-align: middle;</code> from
                    the
                    table</td>
                <td class="align-top">This cell is aligned to the top.</td>
                <td>This here is some placeholder text, intended to take up
                    quite a
                    bit of vertical space, to demonstrate how the vertical
                    alignment
                    works in the preceding cells.</td>
            </tr>
        </tbody>
    </table>
</div>

Switcher

Notifications

Switcher

Petey Cruiser

Jimmy Changa

Graham Cracker

Donatella Nobatti

Anne Fibbiyon

New files available

Updates Available

New Order Received

New review received

22 verified registrations

Project has been approved

Notifications

Valex Video call

Daneil Scott

Calling...

Valex Voice call

Daneil Scott

Calling...

Tables