Basic Table
Using the most basic table markup, here’s how .table-based tables look in Bootstrap.
| Profile | VatNo. | Created | Status |
|---|---|---|---|
| Jacob | 53275531 | 12 May 2017 | Pending |
| Messsy | 53275532 | 15 May 2017 | In progress |
| John | 53275533 | 14 May 2017 | Fixed |
| Peter | 53275534 | 16 May 2017 | Completed |
| Dave | 53275535 | 20 May 2017 | In progress |
Hoverable Table
Add .table-hover to enable a hover state on table rows within a <tbody>.
| Profile | VatNo. | Created | Status |
|---|---|---|---|
| Jacob | 53275531 | 12 May 2017 | Pending |
| Messsy | 53275532 | 15 May 2017 | In progress |
| John | 53275533 | 14 May 2017 | Fixed |
| Peter | 53275534 | 16 May 2017 | Completed |
| Dave | 53275535 | 20 May 2017 | In progress |
Striped rows
Use .table-striped to add zebra-striping to any table row within the <tbody>.
| User | Project | Started | Deadline | Status |
|---|---|---|---|---|
 |
Design Updated | 12 Jan 2021 | 12 May 2021 | Pending |
 |
Website Develop | 15 Jan 2021 | 15 May 2021 | In progress |
 |
Digital Marketing | 14 Jan 2021 | 14 May 2021 | Fixed |
 |
Ad Analysis | 16 Jan 2021 | 16 May 2021 | Completed |
 |
SEO Optimize | 20 Jan 2021 | 20 May 2021 | In progress |
Bordered tables
Add .table-bordered for borders on all sides of the table and cells. Bootstrap border color utilities can be added to change colors like .border-primary on table tag.
| User | Project | Started | Deadline | Status |
|---|---|---|---|---|
|
Design Updated | 12 Jan 2021 | 12 May 2021 | Pending |
|
Website Develop | 15 Jan 2021 | 15 May 2021 | In progress |
|
Digital Marketing | 14 Jan 2021 | 14 May 2021 | Fixed |
|
Ad Analysis | 16 Jan 2021 | 16 May 2021 | Completed |
|
SEO Optimize | 20 Jan 2021 | 20 May 2021 | In progress |
Tables without borders
Add .table-borderless for a table without borders.
| User | Project | Started | Deadline | Status |
|---|---|---|---|---|
|
Design Updated | 12 Jan 2021 | 12 May 2021 | Pending |
|
Website Develop | 15 Jan 2021 | 15 May 2021 | In progress |
|
Digital Marketing | 14 Jan 2021 | 14 May 2021 | Fixed |
|
Ad Analysis | 16 Jan 2021 | 16 May 2021 | Completed |
|
SEO Optimize | 20 Jan 2021 | 20 May 2021 | In progress |
Color Variants
Use contextual classes to color tables, table rows or individual cells.
| User | Project | Started | Deadline | Status |
|---|---|---|---|---|
|
Design Updated | 12 Jan 2021 | 12 May 2021 | Pending |
|
Website Develop | 15 Jan 2021 | 15 May 2021 | In progress |
|
Digital Marketing | 14 Jan 2021 | 14 May 2021 | Fixed |
|
Ad Analysis | 16 Jan 2021 | 16 May 2021 | Completed |
|
SEO Optimize | 20 Jan 2021 | 20 May 2021 | In progress |
 |
Design Updated | 12 Jan 2021 | 12 May 2021 | Pending |
 |
Website Develop | 15 Jan 2021 | 15 May 2021 | In progress |
 |
Digital Marketing | 14 Jan 2021 | 14 May 2021 | Fixed |
Dark Table
Use contextual classes to table.
| User | Project | Started | Deadline | Status |
|---|---|---|---|---|
|
Design Updated | 12 Jan 2021 | 12 May 2021 | Pending |
|
Website Develop | 15 Jan 2021 | 15 May 2021 | In progress |
|
Digital Marketing | 14 Jan 2021 | 14 May 2021 | Fixed |
|
Ad Analysis | 16 Jan 2021 | 16 May 2021 | Completed |
|
SEO Optimize | 20 Jan 2021 | 20 May 2021 | In progress |