Tables
Basic Table For basic styling—light padding and only horizontal dividers—add the base class .table to any
<table>. It may seem super redundant, but given the widespread use of tables for other plugins like calendars and date pickers, we've opted to isolate our custom table styles.| # | First Name | Last Name | Username | Nickname |
|---|---|---|---|---|
| 1 | John | Doe | johndoe@gmail.com | JD |
| 2 | John | Doe | johndoe@gmail.com | JD |
| 3 | John | Doe | johndoe@gmail.com | JD |
| 4 | John | Doe | johndoe@gmail.com | JD |
| 5 | John | Doe | johndoe@gmail.com | JD |
Responsive Table Create responsive tables by wrapping any
.table in .table-responsive to make them scroll horizontally on small devices (under 768px). When viewing on anything larger than 768px wide, you will not see any difference in these tables.| # | First Name | Last Name | Username | Nickname |
|---|---|---|---|---|
| 1 | John | Doe | johndoe@gmail.com | JD |
| 2 | John | Doe | johndoe@gmail.com | JD |
| 3 | John | Doe | johndoe@gmail.com | JD |
| 4 | John | Doe | johndoe@gmail.com | JD |
| 5 | John | Doe | johndoe@gmail.com | JD |
Bordered Table Add
.table-bordered for borders on all sides of the table and cells.| # | First Name | Last Name | Username | Nickname |
|---|---|---|---|---|
| 1 | John | Doe | johndoe@gmail.com | JD |
| 2 | John | Doe | johndoe@gmail.com | JD |
| 3 | John | Doe | johndoe@gmail.com | JD |
| 4 | John | Doe | johndoe@gmail.com | JD |
| 5 | John | Doe | johndoe@gmail.com | JD |
Striped Rows Use
.table-striped to add zebra-striping to any table row within the <tbody>| # | First Name | Last Name | Username | Nickname |
|---|---|---|---|---|
| 1 | John | Doe | johndoe@gmail.com | JD |
| 2 | John | Doe | johndoe@gmail.com | JD |
| 3 | John | Doe | johndoe@gmail.com | JD |
| 4 | John | Doe | johndoe@gmail.com | JD |
| 5 | John | Doe | johndoe@gmail.com | JD |
Hover Rows Add
.table-hover to enable a hover state on table rows within a <tbody>| # | First Name | Last Name | Username | Nickname |
|---|---|---|---|---|
| 1 | John | Doe | johndoe@gmail.com | JD |
| 2 | John | Doe | johndoe@gmail.com | JD |
| 3 | John | Doe | johndoe@gmail.com | JD |
| 4 | John | Doe | johndoe@gmail.com | JD |
| 5 | John | Doe | johndoe@gmail.com | JD |
Condensed Table Add
.table-condensed to make tables more compact by cutting cell padding in half| # | First Name | Last Name | Username | Nickname |
|---|---|---|---|---|
| 1 | John | Doe | johndoe@gmail.com | JD |
| 2 | John | Doe | johndoe@gmail.com | JD |
| 3 | John | Doe | johndoe@gmail.com | JD |
| 4 | John | Doe | johndoe@gmail.com | JD |
| 5 | John | Doe | johndoe@gmail.com | JD |
Custom Headers Make your Tables more colorfull by adding background color classes on table headers.
| No. | First Name | Last Name | Username |
|---|---|---|---|
| 1 | John | Doe | johndoe@gmail.com |
| 2 | John | Doe | johndoe@gmail.com |
| 3 | John | Doe | johndoe@gmail.com |
| No. | First Name | Last Name | Username |
|---|---|---|---|
| 1 | John | Doe | johndoe@gmail.com |
| 2 | John | Doe | johndoe@gmail.com |
| 3 | John | Doe | johndoe@gmail.com |
| No. | First Name | Last Name | Username |
|---|---|---|---|
| 1 | John | Doe | johndoe@gmail.com |
| 2 | John | Doe | johndoe@gmail.com |
| 3 | John | Doe | johndoe@gmail.com |
| No. | First Name | Last Name | Username |
|---|---|---|---|
| 1 | John | Doe | johndoe@gmail.com |
| 2 | John | Doe | johndoe@gmail.com |
| 3 | John | Doe | johndoe@gmail.com |