Simple Table
Using the most basic table. Add .table class to table tag.
| Full Name | Customer Id | Designation | Company | Stage | Payout | Contact Info |
|---|---|---|---|---|---|---|
 | #CUS001 | Architect | Edinburgh | active | $320,800 | +1 (025) 466-7506 |
 | #CUS002 | Accountant | Tokyo | pending | $170,750 | +1 (790) 476-9505 |
 | #CUS003 | Technical | Francisco | pending | $86,000 | +1 (227) 375-6641 |
 | #CUS004 | Developer | Edinburgh | active | $433,060 | +1 (213) 619-7749 |
 | #CUS005 | Accountant | Tokyo | pending | $162,700 | +1 (152) 465-2290 |
 | #CUS006 | Integration | New York | active | $372,000 | +1 (185) 793-6446 |
Dark Table
Using the Dark table. Add .table-dark class to table tag.
| Id | Name | Position | Office | Age | Salary |
|---|---|---|---|---|---|
| 1 | Tiger Nixon | Architect | Edinburgh | 61 | $320,800 |
| 2 | Garrett Winters | Accountant | Tokyo | 63 | $170,750 |
| 3 | Ashton Cox | Technical | San Francisco | 66 | $86,000 |
| 4 | Cedric Kelly | Developer | Edinburgh | 22 | $433,060 |
| 5 | Airi Satou | Accountant | Tokyo | 33 | $162,700 |
| 6 | Williamson | Integration | New York | 33 | $162,700 |
Bordered Tables With Striped
Using the border table need to add .table-bordered and .table-striped
| Full Name | Customer Id | Designation | Company | Stage | Payout |
|---|---|---|---|---|---|
| #CUS001 | Architect | Edinburgh | active | $320,800 |
| #CUS002 | Accountant | Tokyo | pending | $170,750 |
| #CUS003 | Technical | Francisco | pending | $86,000 |
| #CUS004 | Developer | Edinburgh | active | $433,060 |
| #CUS005 | Accountant | Tokyo | pending | $162,700 |
| #CUS006 | Integration | New York | active | $372,000 |
Tables Without Borders
Using the borderless table need to add .table-borderless class
| 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
| Full Name | Customer Id | Designation | Company | Stage | Payout | Contact Info |
|---|---|---|---|---|---|---|
| #CUS001 | Architect | Edinburgh | active | $320,800 | +1 (025) 466-7506 |
| #CUS002 | Accountant | Tokyo | pending | $170,750 | +1 (790) 476-9505 |
| #CUS003 | Technical | Francisco | pending | $86,000 | +1 (227) 375-6641 |
| #CUS004 | Developer | Edinburgh | active | $433,060 | +1 (213) 619-7749 |
| #CUS005 | Accountant | Tokyo | pending | $162,700 | +1 (152) 465-2290 |
| #CUS006 | Integration | New York | active | $372,000 | +1 (185) 793-6446 |
Small Table
Using the small table. 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. 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 |
|---|---|---|---|---|---|
| #CUS001 | Williamson | Architect | Edinburgh | $320,800 | |
| #CUS002 | Riley Hayes | Accountant | Tokyo | $170,750 | |
| #CUS003 | Harper Lane | Technical | Francisco | $86,000 | |
| #CUS004 | Avery Mitchell | Developer | New York | $36,000 | |
| #CUS005 | Rowan Carte | Accountant | New York | $62,000 | |
| #CUS006 | Adrian Brooks | Developer | New York | $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
| # | First | Last | Handle | |||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| 1 | Mark | Otto | @mdo | |||||||||
| ||||||||||||
| 3 | Larry | the Bird | ||||||||||
| 4 | Einar | Miller | ||||||||||
| 5 | Layne | Paucek | ||||||||||
Two Way Table
| Name | Salary |
|---|---|
| Tiger Nixon | $320,800 |
| Garrett | $170,750 |
| Ashton Cox | $86,000 |
| Williamson | $547,000 |
Always Responsive
| # | 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 |