Basic Table
Simple Table
Using the most basic table. Add .table class to table tag.
| Id | Name | Position | Office | Status | Salary | Contact |
|---|---|---|---|---|---|---|
| 1 |  | Architect | Edinburgh | active | $320,800 | +1 (025) 466-7506 |
| 2 |  | Accountant | Tokyo | pending | $170,750 | +1 (790) 476-9505 |
| 3 |  | Technical | Francisco | pending | $86,000 | +1 (227) 375-6641 |
| 4 |  | Developer | Edinburgh | active | $433,060 | +1 (213) 619-7749 |
| 5 |  | Accountant | Tokyo | pending | $162,700 | +1 (152) 465-2290 |
| 6 |  | 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 class to table tag and .table-striped class for Strip table
| Id | Name | Position | Office | Status | Salary |
|---|---|---|---|---|---|
| 1 | | Architect | Edinburgh | active | $320,800 |
| 2 | | Accountant | Tokyo | pending | $170,750 |
| 3 | | Technical | San Francisco | pending | $86,000 |
| 4 | | Developer | Edinburgh | active | $433,060 |
| 5 | | Accountant | Tokyo | pending | $162,700 |
| 6 | | Integration | New York | active | $162,700 |
Tables Without Borders
Using the borderless table need to add .table-borderless class to table tag
| Id | Name | Position | Office | Age | Salary |
|---|---|---|---|---|---|
| 1 | Tiger Nixon | active | Edinburgh | 61 | $320,800 |
| 2 | Garrett Winters | pending | Tokyo | 63 | $170,750 |
| 3 | Ashton Cox | pending | San Francisco | 66 | $86,000 |
| 4 | Cedric Kelly | active | Edinburgh | 22 | $433,060 |
| 5 | Airi Satou | pending | Tokyo | 33 | $162,700 |
| 6 | Williamson | active | New York | 33 | $162,700 |
Hoverable Table
Using the Hoverable table need to add .table-hover class to the table tag
| Id | Name | Position | Office | Status | Salary | Contact |
|---|---|---|---|---|---|---|
| 1 | Tiger Nixon | Architect | Edinburgh | active | $320,800 | +1 (025) 466-7506 |
| 2 | Garrett Winters | Accountant | Tokyo | pending | $170,750 | +1 (790) 476-9505 |
| 3 | Ashton Cox | Technical | San Francisco | pending | $86,000 | +1 (227) 375-6641 |
| 4 | Cedric Kelly | Developer | Edinburgh | active | $433,060 | +1 (213) 619-7749 |
| 5 | Airi Satou | Accountant | Tokyo | pending | $162,700 | +1 (152) 465-2290 |
| 6 | Williamson | Integration | New York | active | $162,700 | +1 (185) 793-6446 |
Small Table
Using the small table need to add .table-sm 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 |
Large Table
Using the large table need to add .table-lg class to table tag
| Id | Name | Position | Office | Status | Salary |
|---|---|---|---|---|---|
| 1 | Tiger Nixon | Architect | Edinburgh | active | $320,800 |
| 2 | Garrett Winters | Accountant | Tokyo | pending | $170,750 |
| 3 | Ashton Cox | Technical | San Francisco | pending | $86,000 |
| 4 | Cedric Kelly | Developer | Edinburgh | active | $433,060 |
| 5 | Airi Satou | Accountant | Tokyo | pending | $162,700 |
| 6 | Williamson | Integration | New York | active | $162,700 |
Table With Bottom Border
Using the bottom bordered table need to add .table-bottom-border class to table tag
| Id | Name | Position | Office | Team | Salary |
|---|---|---|---|---|---|
| 1 | Tiger Nixon | architect | Edinburgh |
| $320,800 |
| 2 | Garrett | accountant | Tokyo |
| $170,750 |
| 3 | Ashton Cox | technical | Francisco |
| $86,000 |
| 4 | Evert | developer | New York |
| $36,000 |
| 5 | Murazik | accountant | New York |
| $62,000 |
| 6 | Williamson | developer | New York |
| $894,000 |
Table Striped Columns
Using the column strip table need to add .table-striped-columns 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 |
Table Variants
Using the Color Variants table need to add .table-Variants 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 |
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
| Name | Salary |
|---|---|
| Tiger Nixon | $320,800 |
| Garrett | $170,750 |
| Ashton Cox | $86,000 |
| Williamson | $547,000 |
Always Responsive
Apply .table-responsive- "sm","md","lg" ,"xl","xxl" 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 |