Basic Table
For basic styling—light padding and only horizontal dividers—add the base class .table
to any <table>
.
# | First Name | Last Name | Username |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry | the Bird |
Inverse Table
You can also invert the colors—with light text on dark backgrounds—with .table-dark
.
# | First Name | Last Name | Username |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry | the Bird |
Table head options
Use one of two modifier classes to make <thead>
s appear light or dark gray.
# | First Name | Last Name | Username |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry | the Bird |
Striped rows
Use .table-striped
to add zebra-striping to any table row
within the <tbody>
.
# | First Name | Last Name | Username |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry | the Bird |
Bordered table
Add .table-bordered
for borders on all sides of the table and cells.
# | First Name | Last Name | Username |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Mark | Otto | @TwBootstrap |
3 | Jacob | Thornton | @fat |
4 | Larry the Bird |
Hoverable Rows
Create responsive tables by wrapping any .table
in .table-responsive
to make them scroll horizontally on small devices (under 768px).
# | First Name | Last Name | Username |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry the Bird |
Small table
Add .table-sm
to make tables more compact by cutting cell padding in half.
# | First Name | Last Name | Username |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry the Bird | ||
4 | Column content | Column content | Column content |
5 | Column content | Column content | Column content |
6 | Column content | Column content | Column content |
7 | Column content | Column content | Column content |
8 | Column content | Column content | Column content |
9 | Column content | Column content | Column content |
Contextual classes
Use contextual classes to color table rows or individual cells.
# | Heading 1 | Heading 2 | Heading 3 |
---|---|---|---|
1 | Column content | Column content | Column content |
3 | Column content | Column content | Column content |
5 | Column content | Column content | Column content |
7 | Column content | Column content | Column content |
9 | Column content | Column content | Column content |
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.
# | First Name | Last Name | Username |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry | the Bird |
Responsive Table
.table
in .table-responsive
to make them scroll horizontally on small devices (under 768px).# | First Name | Last Name | Username |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry | the Bird |
Table with options
Copyright © 2021 XatoWeb, All rights reserved.
Crafted with extra
Chat Groups
My Favourites
Andrew Mackie
It will seem like simplified English.
Sophia Garner
Nice and amazing.
Jackie Smith
Send me the .pdf files asap.
Chats
Order Status
Payment Status
Account Setting
Sync Contacts
Auto Update
Recieve Notifications
Mail Setting
Mail Auto Responder
Auto Trash Delete
Custom Signature
Chat Setting
Show Online
Chat Notifications