Logo
Keen extends Bootstrap Tablecomponent with a variety of options to provide unique looking Table components that matches Keen's design standards.
For more info on the original Bootstrap utilities please visit the official Bootstrap Documentation.

Base Examples

Add the base class .tableto any table, then extend with custom styles or our various included modifier classes.

# First Last Status
1 Nick Stone Pending
2 Ana Jacobs Approved
3 Larry Pettis New 

                        <table class="table">
                            <thead>
                                <tr>
                                    <th scope="col">#</th>
                                    <th scope="col">First</th>
                                    <th scope="col">Last</th>
                                    <th scope="col">Status</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <th scope="row">1</th>
                                    <td>Nick</td>
                                    <td>Stone</td>
                                    <td>
                                        <span class="label label-inline label-light-primary font-weight-bold">
                                            Pending
                                        </span>
                                    </td>
                                </tr>
                                <tr>
                                    <th scope="row">2</th>
                                    <td>Ana</td>
                                    <td>Jacobs</td>
                                    <td>
                                        <span class="label label-inline label-light-success font-weight-bold">
                                            Approved
                                        </span>
                                    </td>
                                </tr>
                                <tr>
                                    <th scope="row">3</th>
                                    <td>Larry</td>
                                    <td>Pettis</td>
                                    <td>
                                        <span class="label label-inline label-light-danger font-weight-bold">
                                            New
                                        </span>
                                    </td>
                                </tr>
                            </tbody>
                        </table>

Invert the colors with light text on dark backgrounds using .table-dark.

# First Last Status
1 Nick Stone Pending
2 Ana Jacobs Approved
3 Larry Pettis New 

                        <table class="table table-dark">
                            ...
                        </table>

Add .roundedclass to .tablefor rounded edges.

# First Last Status
1 Nick Stone Pending
2 Ana Jacobs Approved
3 Larry Pettis New 

                        <table class="table table-dark rounded">
                            ...
                        </table>

Table Head Options

Use the modifier classes .thead-lightor .thead-darkto make <thead>s appear light or dark gray.

# First Last Status
1 Nick Stone Pending
2 Ana Jacobs Approved
3 Larry Pettis New
# First Last Status
1 Nick Stone Pending
2 Ana Jacobs Approved
3 Larry Pettis New 

                        <table class="table">
                            <thead class="thead-dark">
                                ...
                            </thead>
                            <tbody>
                                ...
                            </tbody>
                        </table>

                        <table class="table">
                            <thead class="thead-light">
                            ...
                            </thead>
                            <tbody>
                            ...
                            </tbody>
                        </table>

Striped Rows

Use .table-stripedto add zebra-striping to any table row within the <tbody>.

# First Last Status
1 Nick Stone Pending
2 Ana Jacobs Approved
3 Larry Pettis New
# First Last Status
1 Nick Stone Pending
2 Ana Jacobs Approved
3 Larry Pettis New 

                        <table class="table table-striped">
                            ...
                        </table>

                        <table class="table table-striped table-dark">
                            ...
                        </table>

Bordered Table

Add .table-borderedfor borders on all sides of the table and cells.

# First Last Status
1 Nick Stone Pending
2 Ana Jacobs Approved
3 Larry Pettis New
# First Last Status
1 Nick Stone Pending
2 Ana Jacobs Approved
3 Larry Pettis New 

                        <table class="table table-bordered">
                            ...
                        </table>

                        <table class="table table-bordered table-dark">
                            ...
                        </table>

Borderless Table

Add .table-borderlessfor a table without borders.

# First Last Status
1 Nick Stone Pending
2 Ana Jacobs Approved
3 Larry Pettis New
# First Last Status
1 Nick Stone Pending
2 Ana Jacobs Approved
3 Larry Pettis New 

                        <table class="table table-borderless">
                            ...
                        </table>

                        <table class="table table-borderless table-dark">
                            ...
                        </table>

Hoverable Rows

Add .table-hoverfor a table with hover effect.

# First Last Status
1 Nick Stone Pending
2 Ana Jacobs Approved
3 Larry Pettis New
# First Last Status
1 Nick Stone Pending
2 Ana Jacobs Approved
3 Larry Pettis New 

                        <table class="table table-hover">
                            ...
                        </table>

                        <table class="table table-hover table-dark">
                            ...
                        </table>

Small Table

Add .table-smto make tables more compact by cutting cell padding in half.

# First Last Status
1 Nick Stone Pending
2 Ana Jacobs Approved
3 Larry Pettis New 

                        <table class="table table-sm">
                            ...
                        </table>

Contextual Classes

Use contextual classes to color table rows or individual cells.

Class Heading Heading
Active Cell Cell
Default Cell Cell
Primary Cell Cell
Secondary Cell Cell
Success Cell Cell
Danger Cell Cell
Warning Cell Cell
Info Cell Cell
Light Cell Cell
Dark Cell Cell 

                        <table class="table">
                            <thead>
                                <tr>
                                    <th scope="col">Class</th>
                                    <th scope="col">Heading</th>
                                    <th scope="col">Heading</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr class="table-active">
                                    <th scope="row">Active</th>
                                    <td>Cell</td>
                                    <td>Cell</td>
                                </tr>
                                <tr>
                                    <th scope="row">Default</th>
                                    <td>Cell</td>
                                    <td>Cell</td>
                                </tr>

                                <tr class="table-primary">
                                    <th scope="row">Primary</th>
                                    <td>Cell</td>
                                    <td>Cell</td>
                                </tr>
                                <tr class="table-secondary">
                                    <th scope="row">Secondary</th>
                                    <td>Cell</td>
                                    <td>Cell</td>
                                </tr>
                                <tr class="table-success">
                                    <th scope="row">Success</th>
                                    <td>Cell</td>
                                    <td>Cell</td>
                                </tr>
                                <tr class="table-danger">
                                    <th scope="row">Danger</th>
                                    <td>Cell</td>
                                    <td>Cell</td>
                                </tr>
                                <tr class="table-warning">
                                    <th scope="row">Warning</th>
                                    <td>Cell</td>
                                    <td>Cell</td>
                                </tr>
                                <tr class="table-info">
                                    <th scope="row">Info</th>
                                    <td>Cell</td>
                                    <td>Cell</td>
                                </tr>
                                <tr class="table-light">
                                    <th scope="row">Light</th>
                                    <td>Cell</td>
                                    <td>Cell</td>
                                </tr>
                                <tr class="table-dark">
                                    <th scope="row">Dark</th>
                                    <td>Cell</td>
                                    <td>Cell</td>
                                </tr>
                            </tbody>
                        </table>

Regular table background variants are not available with the dark table, however, you may use text or background utilities to achieve similar styles.

# Heading Heading
1 Cell Cell
2 Cell Cell
3 Cell Cell
4 Cell Cell
5 Cell Cell
6 Cell Cell
7 Cell Cell
8 Cell Cell
9 Cell Cell 

                        <table class="table table-dark">
                        <thead>
                            <tr>
                                <th scope="col">#</th>
                                <th scope="col">Heading</th>
                                <th scope="col">Heading</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr class="bg-primary">
                                <th scope="row">1</th>
                                <td>Cell</td>
                                <td>Cell</td>
                            </tr>
                            <tr>
                                <th scope="row">2</th>
                                <td>Cell</td>
                                <td>Cell</td>
                            </tr>
                            <tr class="bg-success">
                                <th scope="row">3</th>
                                <td>Cell</td>
                                <td>Cell</td>
                            </tr>
                            <tr>
                                <th scope="row">4</th>
                                <td>Cell</td>
                                <td>Cell</td>
                            </tr>
                            <tr class="bg-info">
                                <th scope="row">5</th>
                                <td>Cell</td>
                                <td>Cell</td>
                            </tr>
                            <tr>
                                <th scope="row">6</th>
                                <td>Cell</td>
                                <td>Cell</td>
                            </tr>
                            <tr class="bg-warning">
                                <th scope="row">7</th>
                                <td>Cell</td>
                                <td>Cell</td>
                            </tr>
                            <tr>
                                <th scope="row">8</th>
                                <td>Cell</td>
                                <td>Cell</td>
                            </tr>
                            <tr class="bg-danger">
                                <th scope="row">9</th>
                                <td>Cell</td>
                                <td>Cell</td>
                            </tr>
                        </tbody>
                    </table>

Captions

A <caption> functions like a heading for a table. It helps users with screen readers to find a table and understand what it’s about and decide if they want to read it.

List of users
# First Last Status
1 Nick Stone Pending
2 Ana Jacobs Approved
3 Larry Pettis New 

                        <table class="table">
                            <caption>List of users</caption>
                            <thead>
                                <tr>
                                    ...
                                </tr>
                            </thead>
                            <tbody>
                                ...
                            </tbody>
                        </table>

Responsive Tables

Responsive tables allow tables to be scrolled horizontally with ease. Make any table responsive across all viewports by wrapping a .tablewith .table-responsive. Or, pick a maximum breakpoint with which to have a responsive table up to by using .table-responsive{-sm|-md|-lg|-xl}.

# Heading Heading Heading Heading Heading Heading Heading Heading Heading
1 Cell Cell Cell Cell Cell Cell Cell Cell Cell
2 Cell Cell Cell Cell Cell Cell Cell Cell Cell
3 Cell Cell Cell Cell Cell Cell Cell Cell Cell 

                        <div class="table-responsive">
                            <table class="table">
                            ...
                            </table>
                        </div>

Use .table-responsive{-sm|-md|-lg|-xl}as needed to create responsive tables up to a particular breakpoint. From that breakpoint and up, the table will behave normally and not scroll horizontally.

# Heading Heading Heading Heading Heading
1 Cell Cell Cell Cell Cell
2 Cell Cell Cell Cell Cell
3 Cell Cell Cell Cell Cell 

                        <div class="table-responsive-lg">
                            <table class="table">
                            ...
                            </table>
                        </div>

Quick Actions finance & reports

Accounting
Members
Projects
Customers
Email
Settings
Orders

User Profile 15 messages

Ryan Smith
Art Director
ryan@keen.com
My Account
Profile info update
My Tasks
Todo and tasks
My Events
Logs and notifications
My Statements
latest tasks and projects
 Sign Out
Recent Notifications

Important Notice

Lorem Ipsum is simply dummy text of the printing and industry.

System Update

There are many variations of passages of Lorem Ipsum available.

Server Maintenance

Contrary to popular belief, Lorem Ipsum is not simply random text.

DB Migration

If you are going to use a passage of Lorem Ipsum, you need.

System Messages
09:30 AM

To start a blog, think of a topic about and first brainstorm ways to write details

2:45 PM

To start a blog, think of a topic about and first brainstorm ways to write details

3:12 PM

To start a blog, think of a topic about and first brainstorm ways to write details

7:05 PM

To start a blog, think of a topic about and first brainstorm ways to write details

Notifications
Pic
Marcus Smart UI/UX, Art Director
+65%
AH
Andreas Hawks Python Developer
+23%
SC
Sarah Connor HTML, CSS. jQuery
-34%
Pic
Amanda Harden UI/UX, Art Director
+72%
SR
Sean Robbins UI/UX, Art Director
+65%
JT
Jason Tatum ASP.NET Developer
+139%

Privacy Settings:

After you log in, you will be asked for additional information to confirm your identity.

Security Settings:

After you log in, you will be asked for additional information to confirm your identity. For extra security, this requires you to confirm your email. Learn more.

Select A Demo

Demo 1
HTML RTL
Demo 2
HTML RTL
Demo 3
HTML RTL
Demo 4
HTML RTL
Demo 5
HTML RTL
Demo 6
HTML RTL
Demo 7
HTML RTL
Demo 8
Coming soon
Demo 9
Coming soon
Buy Keen Now!