Table

A table displays a collections of data grouped into rows

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 Progress Started Deadline Status
image Design Updated
12 Jan 2021 12 May 2021 Pending
image Website Develop
15 Jan 2021 15 May 2021 In progress
image Digital Marketing
14 Jan 2021 14 May 2021 Fixed
image Ad Analysis
16 Jan 2021 16 May 2021 Completed
image 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 Progress Started Deadline Status
image Design Updated
12 Jan 2021 12 May 2021 Pending
image Website Develop
15 Jan 2021 15 May 2021 In progress
image Digital Marketing
14 Jan 2021 14 May 2021 Fixed
image Ad Analysis
16 Jan 2021 16 May 2021 Completed
image SEO Optimize
20 Jan 2021 20 May 2021 In progress
Tables without borders

Add .table-borderless for a table without borders.

User Project Progress Started Deadline Status
image Design Updated
12 Jan 2021 12 May 2021 Pending
image Website Develop
15 Jan 2021 15 May 2021 In progress
image Digital Marketing
14 Jan 2021 14 May 2021 Fixed
image Ad Analysis
16 Jan 2021 16 May 2021 Completed
image 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 Progress Started Deadline Status
image Design Updated
12 Jan 2021 12 May 2021 Pending
image Website Develop
15 Jan 2021 15 May 2021 In progress
image Digital Marketing
14 Jan 2021 14 May 2021 Fixed
image Ad Analysis
16 Jan 2021 16 May 2021 Completed
image SEO Optimize
20 Jan 2021 20 May 2021 In progress
image Design Updated
12 Jan 2021 12 May 2021 Pending
image Website Develop
15 Jan 2021 15 May 2021 In progress
image Digital Marketing
14 Jan 2021 14 May 2021 Fixed
Dark Table

Use contextual classes to table.

User Project Progress Started Deadline Status
image Design Updated
12 Jan 2021 12 May 2021 Pending
image Website Develop
15 Jan 2021 15 May 2021 In progress
image Digital Marketing
14 Jan 2021 14 May 2021 Fixed
image Ad Analysis
16 Jan 2021 16 May 2021 Completed
image SEO Optimize
20 Jan 2021 20 May 2021 In progress