SCIFI - Asp.Net Core8 & Mvc5 Bootstrap 5 Premium Admin & Dashboard Template

- English
- Spanish
- French
- German
- Italian
- Russian
Notifications
4 Unread
- Jessica Lily
  Reminder to complete your weekly tasks
- Payment Received
  You've been paid for freelance project.
- New Message
  You've received a new message from a friend.
- Appointment Confirmed
  Your appointment for next week has been confirmed.
- Exclusive Offer
  Limited-time offer just for you! Check it out now.
View All

No New Notifications
- Profile
- Inbox 17
- Task Manager
- Settings
- Support
- Log Out

Basic Tables

Name	Created On	Number	Status
Mark	21,Dec 2021	+1234-12340	Completed
Monika	29,April 2023	+1523-12459	Failed
Madina	30,Nov 2023	+1982-16234	Successful
Bhamako	18,Mar 2023	+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 2023</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 2023</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 2023</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
Peter Harvey	Active	Peterharvey421@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>Peter Harvey Khan
                    </div>
                </th>
                <td><span class="badge bg-success-transparent">Active</span></td>
                <td>Peter Harveykhan421@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	Beckett Chad	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>Beckett Chad
                    </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	Reva Shaan	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>Reva Shaan
                    </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 2023	Fixed
Zozo Hadid	#5182-3412	02 July 2023	In Progress
Martiana	#5182-3423	15 April 2023	Completed
Reva Shaan	#5182-3456	17 March 2023	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 2023</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 2023</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 2023</td>
                <td><span class="badge bg-success">Completed</span></td>
            </tr>
            <tr>
                <th scope="row">Reva Shaan</th>
                <td>#5182-3456</td>
                <td>17 March 2023</td>
                <td><span class="badge bg-danger">Pending</span></td>
            </tr>
        </tbody>
    </table>
</div>

Table Group Divideres

Product	Seller	Sale Percentage	Quantity 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">Quantity Sold</th>
            </tr>
        </thead>
        <tbody class="table-group-divider">
            <tr>
                <th scope="row">Smart Watch</th>
                <td>Slowtrack.inc</td>
                <td><a href="javascript:void(0);" 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="javascript:void(0);" 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="javascript:void(0);" 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="javascript:void(0);" 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-black 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-black 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-black 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-black 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	Ayyan Cohen Ayyan@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>Ayyan Cohen</span>
                            </div>
                            <div class="lh-1">
                                <span class="fs-11 text-muted">Ayyan@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 2023
Zozo Hadid	#5182-3412	02 July 2023
Martiana	#5182-3423	15 April 2023
Reva Shaan	#5182-3456	17 March 2023

<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 2023</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 2023</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 2023</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">Reva Shaan</th>
                <td>#5182-3456</td>
                <td>17 March 2023</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 2023
Zozo Hadid	#5182-3412	02 July 2023
Martiana	#5182-3423	15 April 2023
Reva Shaan	#5182-3456	17 March 2023

<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 2023</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 2023</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 2023</td>
                <td>
                    <button class="btn btn-sm btn-danger-light">Rejected</button>
                </td>
            </tr>
            <tr>
                <th scope="row">Reva Shaan</th>
                <td>#5182-3456</td>
                <td>17 March 2023</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 2023
Zozo Hadid	#5182-3412	02 July 2023
Martiana	#5182-3423	15 April 2023
Reva Shaan	#5182-3456	17 March 2023

<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 2023</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 2023</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 2023</td>
                <td>
                    <button class="btn btn-sm btn-danger-light">Rejected</button>
                </td>
            </tr>
            <tr>
                <th scope="row">Reva Shaan</th>
                <td>#5182-3456</td>
                <td>17 March 2023</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 2023
Zozo Hadid	#5182-3412	02 July 2023
Martiana	#5182-3423	15 April 2023
Reva Shaan	#5182-3456	17 March 2023

<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 2023</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 2023</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 2023</td>
                <td>
                    <button class="btn btn-sm btn-danger-light">Rejected</button>
                </td>
            </tr>
            <tr>
                <th scope="row">Reva Shaan</th>
                <td>#5182-3456</td>
                <td>17 March 2023</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 2023
Zozo Hadid	#5182-3412	02 July 2023
Martiana	#5182-3423	15 April 2023
Reva Shaan	#5182-3456	17 March 2023

<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 2023</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 2023</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 2023</td>
                <td>
                    <button class="btn btn-sm btn-danger-light">Rejected</button>
                </td>
            </tr>
            <tr>
                <th scope="row">Reva Shaan</th>
                <td>#5182-3456</td>
                <td>17 March 2023</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 2023
Zozo Hadid	#5182-3412	02 July 2023
Martiana	#5182-3423	15 April 2023
Reva Shaan	#5182-3456	17 March 2023

<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 2023</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 2023</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 2023</td>
                <td>
                    <button class="btn btn-sm btn-danger-light">Rejected</button>
                </td>
            </tr>
            <tr>
                <th scope="row">Reva Shaan</th>
                <td>#5182-3456</td>
                <td>17 March 2023</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 2023	+1523-12459	Failed
Madina	30,Nov 2023	+1982-16234	Successful
Bhamako	18,Mar 2023	+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 2023</td>
                <td>+1523-12459</td>
                <td><span class="badge bg-warning">Failed</span></td>
            </tr>
            <tr>
                <th scope="row">Madina</th>
                <td>30,Nov 2023</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 2023</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

Alphabets	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">Alphabets</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
Kevin Garfield	Managing Director	Director	Kevingarfield@gmail.com	+4	$1.4billion
Ayyan Cowel	Service Manager	Manager	Ayyancowel234@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-black 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>Kevin Garfield
                    </div>
                </td>
                <td>Managing Director</td>
                <td><span class="badge bg-warning-transparent">Director</span></td>
                <td>Kevingarfield@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-black 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>Ayyan Cowel
                    </div>
                </td>
                <td>Service Manager</td>
                <td><span class="badge bg-success-transparent">Manager</span></td>
                <td>Ayyancowel234@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-black 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-black 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

Shortcuts

Elizabeth Ava2

George Rhys1

Bethany Isla2

Margaret Emma1

Michael Souris1

Olivia Lily1

Smith Brown2

Wilson Li24

Jones Morton3

White Lee1

Wilfrid Price3

Jasmin O'Kon

River Gleichner

Saul Goodmate1

Edgardo Huel

Find out more !

Notifications :

App :

Remaiders :

This Is Not You're Looking For?