Basic Table
Using the most basic table markup, here’s how .table-based tables look in Bootstrap.
| # | First Name | Last Name | Role | Salary | Progress | |
|---|---|---|---|---|---|---|
| Footer 1 | Footer 2 | Footer 3 | Footer 4 | Footer 5 | Footer 6 | Footer 7 |
| 1 | George | Hansen | Admin | George@gmail.com | $900 |
|
| 2 | Joe | Sharp | Designer | sharp@gmail.com | $778 |
|
| 3 | Marvin | White | Developer | marvin@gmail.com | $1000 |
|
| 4 | Benjamin | Powers | Developer | power@gmail.com | $912 |
|
Striped Table
Use .table-striped to add zebra-striping to any table row.
| # | User | First Name | Last Name | |
|---|---|---|---|---|
| 1 |  |
Faye | Mayer | Faye34@gmail.com |
| 2 |  |
Kianna | Lockman | Kianna.Lockman@gmail.com |
| 3 |  |
Timmothy | Mertz | Timmothy72@gmail.com |
| 4 |  |
Alfred | Watsica | Alfred34@gmail.com |
Hover Rows
Use .table-hover to enable a hover state on table rows.
| # | First Name | Last Name | |
|---|---|---|---|
| 1 | Faye | Mayer | Faye34@gmail.com |
| 2 | Kianna | Lockman | Kianna.Lockman@gmail.com |
| 3 | Timmothy | Mertz | Timmothy72@gmail.com |
| 4 | Alfred | Watsica | Alfred34@gmail.com |
Bordered Table
Add .table-bordered for borders on all sides of the table and cells.
| # | Name | Salary | Actions | |
|---|---|---|---|---|
| 1 | Quincy | Quincy@outlook.com | $750 | |
| 2 | Boris | Boris@yahoo.com | $234 | |
| 3 | Lucas | Lucas@yahoo.com | $500 | |
| 4 | Benjamin | Benjamin@outlook.com | $282 |
Contextual Rows
Use contextual classes to color table rows or individual cells.
| # | First Name | Last Name | |
|---|---|---|---|
| 1 | Faye | Mayer | Faye34@gmail.com |
| 2 | Kianna | Lockman | Kianna.Lockman@gmail.com |
| 3 | Timmothy | Mertz | Timmothy72@gmail.com |
| 4 | Alfred | Watsica | Alfred34@gmail.com |
Header Inverse
Use .thead-inverse class to <thead>.
| Name | Status | |
|---|---|---|
| Benjamin |
Benjamin@yahoo.com | Active |
| Faye |
Alfred@yahoo.com | Processing |
| Marvin |
Marvin@yahoo.com | Active |
| Joe |
Joe@yahoo.com | Blocked |