Table Basic
Using the most basic table Leanne Grahamup, here’s how
.table-based tables look in Bootstrap. You can use any example
of below table for your table and it can be use with any type of
bootstrap tables.
User |
Project Name |
Users |
Status |
Actions |
John Smith
|
Xtreme admin |
|
Active
|
|
Robert Smith
|
Adminpro admin |
|
Pending
|
|
Maria Hernandez
|
Monster admin |
|
Completed
|
|
Maria Rodriguez
|
Materialpro admin |
|
Pending
|
|
Mary Deo
|
Elegant admin |
|
Cancel
|
|
Dark Table
You can also invert the colors—with light text on dark
backgrounds—with .table-dark class with .table class.
User |
Project Name |
Users |
Status |
Actions |
John Smith
|
Xtreme admin |
|
Active
|
|
Robert Smith
|
Adminpro admin |
|
Pending
|
|
Maria Hernandez
|
Monster admin |
|
Completed
|
|
Maria Rodriguez
|
Materialpro admin |
|
Pending
|
|
Mary Deo
|
Elegant admin |
|
Cancel
|
|
Table head options
Similar to tables and dark tables, use the modifier classes
.table-dark to make thead appear dark.
User |
Project Name |
Users |
Status |
Actions |
John Smith
|
Xtreme admin |
|
Active
|
|
Robert Smith
|
Adminpro admin |
|
Pending
|
|
Maria Hernandez
|
Monster admin |
|
Completed
|
|
Maria Rodriguez
|
Materialpro admin |
|
Pending
|
|
Mary Deo
|
Elegant admin |
|
Cancel
|
|
Use the modifier class .table-light
to
make thead appear light.
User |
Project Name |
Users |
Status |
Actions |
John Smith
|
Xtreme admin |
|
Active
|
|
Robert Smith
|
Adminpro admin |
|
Pending
|
|
Maria Hernandez
|
Monster admin |
|
Completed
|
|
Maria Rodriguez
|
Materialpro admin |
|
Pending
|
|
Mary Deo
|
Elegant admin |
|
Cancel
|
|
Table Striped
Use .table-striped to add zebra-striping to any table row within
the
. This styling doesn't work in IE8 and below as :nth-child CSS
selector isn't supported.
User |
Project Name |
Users |
Status |
Actions |
John Smith
|
Xtreme admin |
|
Active
|
|
Robert Smith
|
Adminpro admin |
|
Pending
|
|
Maria Hernandez
|
Monster admin |
|
Completed
|
|
Maria Rodriguez
|
Materialpro admin |
|
Pending
|
|
Mary Deo
|
Elegant admin |
|
Cancel
|
|
Table Bordered
Add .table-bordered for borders on all sides of the table and
cells. For Inverse Dark Table, add .table-dark along with
.table-bordered.
User |
Project Name |
Users |
Status |
Actions |
John Smith
|
Xtreme admin |
|
Active
|
|
Robert Smith
|
Adminpro admin |
|
Pending
|
|
Maria Hernandez
|
Monster admin |
|
Completed
|
|
Maria Rodriguez
|
Materialpro admin |
|
Pending
|
|
Mary Deo
|
Elegant admin |
|
Cancel
|
|
Table Borderless
Add .table-borderless for a table without borders. It can also
be used on dark tables.
User |
Project Name |
Users |
Status |
Actions |
John Smith
|
Xtreme admin |
|
Active
|
|
Robert Smith
|
Adminpro admin |
|
Pending
|
|
Maria Hernandez
|
Monster admin |
|
Completed
|
|
Maria Rodriguez
|
Materialpro admin |
|
Pending
|
|
Mary Deo
|
Elegant admin |
|
Cancel
|
|
Table Hoverable
Add .table-hover to enable a hover state on table rows.
User |
Project Name |
Users |
Status |
Actions |
John Smith
|
Xtreme admin |
|
Active
|
|
Robert Smith
|
Adminpro admin |
|
Pending
|
|
Maria Hernandez
|
Monster admin |
|
Completed
|
|
Maria Rodriguez
|
Materialpro admin |
|
Pending
|
|
Mary Deo
|
Elegant admin |
|
Cancel
|
|
Small Table
Add .table-sm class with .table to display small size table.
User |
Project Name |
Users |
Status |
Actions |
John Smith
|
Xtreme admin |
|
Active
|
|
Robert Smith
|
Adminpro admin |
|
Pending
|
|
Maria Hernandez
|
Monster admin |
|
Completed
|
|
Maria Rodriguez
|
Materialpro admin |
|
Pending
|
|
Mary Deo
|
Elegant admin |
|
Cancel
|
|
Contextual classes
Use contextual classes to color table rows or individual cells.
User |
Project Name |
Users |
Status |
Actions |
John Smith
|
Xtreme admin |
|
Active
|
|
Robert Smith
|
Adminpro admin |
|
Pending
|
|
Maria Hernandez
|
Monster admin |
|
Completed
|
|
Maria Rodriguez
|
Materialpro admin |
|
Pending
|
|
Mary Deo
|
Elegant admin |
|
Cancel
|
|
Responsive table
# |
Heading 1 |
Heading 2 |
Heading 3 |
Heading 4 |
Heading 5 |
Heading 6 |
Heading 7 |
Heading 8 |
Heading 9 |
Heading 10 |
Heading 11 |
Heading 12 |
Heading 13 |
1 |
Table cell |
Table cell |
Table cell |
Table cell |
Table cell |
Table cell |
Table cell |
Table cell |
Table cell |
Table cell |
Table cell |
Table cell |
Table cell |
2 |
Table cell |
Table cell |
Table cell |
Table cell |
Table cell |
Table cell |
Table cell |
Table cell |
Table cell |
Table cell |
Table cell |
Table cell |
Table cell |
3 |
Table cell |
Table cell |
Table cell |
Table cell |
Table cell |
Table cell |
Table cell |
Table cell |
Table cell |
Table cell |
Table cell |
Table cell |
Table cell |
4 |
Table cell |
Table cell |
Table cell |
Table cell |
Table cell |
Table cell |
Table cell |
Table cell |
Table cell |
Table cell |
Table cell |
Table cell |
Table cell |