Simple Table
Using the most basic table need to add .table class to table
tag
| Full Name | Customer Id | Designation | Company | Stage | Payout | Contact Info |
|---|---|---|---|---|---|---|
Liam Carter |
#CUS001 | Architect | Edinburgh | active | $320,800 | +1 (025) 466-7506 |
Noah Bennett |
#CUS002 | Accountant | Tokyo | pending | $170,750 | +1 (790) 476-9505 |
Sebastian Turner |
#CUS003 | Technical | Francisco | pending | $86,000 | +1 (227) 375-6641 |
Isabella Rossi |
#CUS004 | Developer | Edinburgh | active | $433,060 | +1 (213) 619-7749 |
Emilia Moore |
#CUS005 | Accountant | Tokyo | pending | $162,700 | +1 (152) 465-2290 |
Quinn Davis x |
#CUS006 | Integration | New York | active | $372,000 | +1 (185) 793-6446 |
Dark Table
Using the Dark table need to add .table-dark class to table
tag
| Full Name | Customer Id | Designation | Company | Age | Payout |
|---|---|---|---|---|---|
| Adrian Brooks | #CUS001 | Architect | Edinburgh | 61 | $320,800 |
| Rowan Carte | #CUS002 | Accountant | Tokyo | 63 | $170,750 |
| Avery Mitchell | #CUS003 | Technical | Francisco | 66 | $86,000 |
| Harper Lane | #CUS004 | Developer | Edinburgh | 22 | $433,060 |
| Riley Hayes | #CUS005 | Accountant | Tokyo | 33 | $162,700 |
| Williamson | #CUS006 | Integration | New York | 61 | $372,000 |
Bordered Tables With Striped
Using the border table need to add .table-bordered class to
table
tag and
.table-striped class for Strip table
| Full Name | Customer Id | Designation | Company | Stage | Payout |
|---|---|---|---|---|---|
|
Liam Carter |
#CUS001 | Architect | Edinburgh | active | $320,800 |
|
Noah Bennett |
#CUS002 | Accountant | Tokyo | pending | $170,750 |
|
Sebastian Turner |
#CUS003 | Technical | Francisco | pending | $86,000 |
|
Isabella Rossi |
#CUS004 | Developer | Edinburgh | active | $433,060 |
|
Emilia Moore |
#CUS005 | Accountant | Tokyo | pending | $162,700 |
|
Quinn Davis |
#CUS006 | Integration | New York | active | $372,000 |
Tables Without Borders
Using the borderless table need to add .table-borderless class
to
table tag
| Full Name | Customer Id | Designation | Company | Age | Payout |
|---|---|---|---|---|---|
| Liam Carter | #CUS001 | Architect | Edinburgh | 61 | $320,800 |
| Noah Bennett | #CUS002 | Accountant | Tokyo | 63 | $170,750 |
| Sebastian Turner | #CUS003 | Technical | Francisco | 66 | $86,000 |
| Isabella Rossi | #CUS004 | Developer | Edinburgh | 22 | $433,060 |
| Emilia Moore | #CUS005 | Accountant | Tokyo | 33 | $162,700 |
| Quinn Davis | #CUS006 | Integration | New York | 61 | $372,000 |
| Full Name | Customer Id | Designation | Company | Age | Payout |
Hoverable Table
Using the Hoverable table need to add .table-hover class to
table
tag
| Full Name | Customer Id | Designation | Company | Stage | Payout | Contact Info |
|---|---|---|---|---|---|---|
|
Adrian Brooks |
#CUS001 | Architect | Edinburgh | active | $320,800 | +1 (025) 466-7506 |
|
Rowan Carte |
#CUS002 | Accountant | Tokyo | pending | $170,750 | +1 (790) 476-9505 |
|
Avery Mitchell |
#CUS003 | Technical | Francisco | pending | $86,000 | +1 (227) 375-6641 |
|
Harper Lane |
#CUS004 | Developer | Edinburgh | active | $433,060 | +1 (213) 619-7749 |
|
Riley Hayes |
#CUS005 | Accountant | Tokyo | pending | $162,700 | +1 (152) 465-2290 |
|
Williamson |
#CUS006 | Integration | New York | active | $372,000 | +1 (185) 793-6446 |
Small Table
Using the small table need to add .table-sm class to table tag
| Full Name | Customer Id | Designation | Company | Age | Payout |
|---|---|---|---|---|---|
| Liam Carter | #CUS001 | Architect | Edinburgh | 61 | $320,800 |
| Noah Bennett | #CUS002 | Accountant | Tokyo | 63 | $170,750 |
| Sebastian Turner | #CUS003 | Technical | Francisco | 66 | $86,000 |
| Isabella Rossi | #CUS004 | Developer | Edinburgh | 22 | $433,060 |
| Emilia Moore | #CUS005 | Accountant | Tokyo | 33 | $162,700 |
| Quinn Davis | #CUS006 | Integration | New York | 61 | $372,000 |
Large Table
Using the large table need to add .table-lg class to table tag
| Full Name | Customer ID | Designation | Company | Stage | Payout |
|---|---|---|---|---|---|
| Adrian Brooks | #CUS001 | Architect | Edinburgh | active | $320,800 |
| Rowan Carte | #CUS002 | Accountant | Tokyo | pending | $170,750 |
| Avery Mitchell | #CUS002 | Technical | Francisco | active | $86,000 |
| Harper Lane | #CUS002 | Integration | New York | pending | $372,000 |
Table With Bottom Border
Using the bottom bordered table need to add
.table-bottom-border
class to table tag
| Customer ID | Full Name | Designation | Company | Panel | Payout |
|---|---|---|---|---|---|
| Williamson | #CUS001 | Architect | Edinburgh |
|
$320,800 |
| Riley Hayes | #CUS002 | Accountant | Tokyo |
|
$170,750 |
| Harper Lane | #CUS003 | Technical | Francisco |
|
$86,000 |
| Avery Mitchell | #CUS004 | Developer | New York |
|
$36,000 |
| Rowan Carte | #CUS005 | Accountant | New York |
|
$62,000 |
| Adrian Brooks | #CUS006 | Developer | New York |
|
$894,000 |
Table Striped Columns
Using the column strip table need to add
.table-striped-columns
class to table tag
| Full Name | Customer ID | Designation | Company | Age | Payout |
|---|---|---|---|---|---|
| Liam Carter | #CUS001 | Architect | Edinburgh | 61 | $320,800 |
| Noah Bennett | #CUS002 | Accountant | Tokyo | 63 | $170,750 |
| Sebastian Turner | #CUS003 | Technical | Francisco | 66 | $86,000 |
| Isabella Rossi | #CUS004 | Williamson | New York | 60 | $36,000 |
| Emilia Moore | #CUS005 | Wava | New York | 49 | $62,000 |
| Quinn Davis | #CUS006 | Integration | New York | 56 | $894,000 |
Table Variants
Using the Color Variants table need to add .table-Variants
class
to table tag
| Full Name | Customer ID | Designation | Company | Age | Payout |
|---|---|---|---|---|---|
| Adrian Brooks | #CUS001 | Architect | Edinburgh | 61 | $320,800 |
| Rowan Carte | #CUS002 | Accountant | Tokyo | 63 | $170,750 |
| Avery Mitchell | #CUS003 | Technical | Francisco | 66 | $86,000 |
| Harper Lane | #CUS004 | Williamson | New York | 60 | $36,000 |
| Riley Hayes | #CUS005 | Wava | New York | 49 | $62,000 |
| Williamson | #CUS006 | Integration | New York | 56 | $894,000 |
| Emilia Moore | #CUS007 | Integration | New York | 56 | $894,000 |
| Quinn Davis | #CUS008 | Integration | New York | 56 | $894,000 |
Nesting Table
Border styles, active styles, and table variants are not inherited by nested tables.
| # | First | Last | Handle | |||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| 1 | Mark | Otto | @mdo | |||||||||
|
||||||||||||
| 3 | Larry | the Bird | ||||||||||
| 4 | Einar | Miller | ||||||||||
| 5 | Layne | Paucek | ||||||||||
Two Way Table
Using the two direction table need to add .text-end class to
last
table head table
data
| Full name | Pay out |
|---|---|
| Liam Carter | $320,800 |
| Noah Bennett | $170,750 |
| Sebastian Turner | $86,000 |
| Isabella Rossi | $547,000 |
| Quinn Davis | $372,000 |
Always Responsive
Apply .table-responsive{-sm|-md|-lg|-xl|-xxl} to make tables
scroll
horizontally on smaller screens while displaying normally on larger ones.
| # | Heading | Heading | Heading | Heading | Heading | Heading | Heading | Heading | Heading |
|---|---|---|---|---|---|---|---|---|---|
| 1 | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell |
| 2 | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell |
| 3 | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell |
| 4 | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell |
