Basic Table
Simple Table
Using the most basic table need to add .table
class to table tag
Id | Name | Position | Office | Status | Salary | Contact |
---|---|---|---|---|---|---|
1 |
![]() Tiger Nixon |
Architect | Edinburgh | active | $320,800 | +1 (025) 466-7506 |
2 |
![]() Garrett |
Accountant | Tokyo | pending | $170,750 | +1 (790) 476-9505 |
3 |
![]() Ashton Cox |
Technical | 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 x |
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
Id | Name | Position | Office | Age | Salary |
---|---|---|---|---|---|
1 | Tiger Nixon | Architect | Edinburgh | 61 | $320,800 |
2 | Garrett | Accountant | Tokyo | 63 | $170,750 |
3 | Ashton Cox | Technical | 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 | 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
Id | Name | Position | Office | Status | Salary |
---|---|---|---|---|---|
1 |
![]() Tiger Nixon |
Architect | Edinburgh | active | $320,800 |
2 |
![]() Garrett |
Accountant | Tokyo | pending | $170,750 |
3 |
![]() Ashton Cox |
Technical | Francisco | pending | $86,000 |
4 |
![]() Cedric Kelly |
Developer | Edinburgh | active | $433,060 |
5 |
![]() Airi Satou |
Accountant | Tokyo | pending | $162,700 |
6 |
![]() Williamson x |
Integration | New York | active | $372,000 |
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 | Architect | Edinburgh | 61 | $320,800 |
2 | Garrett | Accountant | Tokyo | 63 | $170,750 |
3 | Ashton Cox | Technical | 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 | 61 | $372,000 |
Hoverable Table
Using the Hoverable table need to add .table-hover
class to table
tag
Id | Name | Position | Office | Status | Salary | Contact |
---|---|---|---|---|---|---|
1 |
![]() Tiger Nixon |
Architect | Edinburgh | active | $320,800 | +1 (025) 466-7506 |
2 |
![]() Garrett |
Accountant | Tokyo | pending | $170,750 | +1 (790) 476-9505 |
3 |
![]() Ashton Cox |
Technical | 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 x |
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
Id | Name | Position | Office | Age | Salary |
---|---|---|---|---|---|
1 | Tiger Nixon | Architect | Edinburgh | 61 | $320,800 |
2 | Garrett | Accountant | Tokyo | 63 | $170,750 |
3 | Ashton Cox | Technical | 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 | 61 | $372,000 |
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 | Accountant | Tokyo | pending | $170,750 |
3 | Ashton Cox | Technical | Francisco | active | $86,000 |
6 | Williamson | 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
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 | Accountant | Tokyo | 63 | $170,750 |
3 | Ashton Cox | Technical | Francisco | 66 | $86,000 |
4 | Evert | Williamson | New York | 60 | $36,000 |
5 | Murazik | Wava | New York | 49 | $62,000 |
6 | Williamson | Integration | New York | 56 | $894,000 |
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 | Accountant | Tokyo | 63 | $170,750 |
3 | Ashton Cox | Technical | Francisco | 66 | $86,000 |
4 | Evert | Williamson | New York | 60 | $36,000 |
5 | Murazik | Wava | New York | 49 | $62,000 |
6 | Williamson | Integration | New York | 56 | $894,000 |
6 | Williamson | Integration | New York | 56 | $894,000 |
6 | Williamson | 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
Name | Salary |
---|---|
Tiger Nixon | $320,800 |
Garrett | $170,750 |
Ashton Cox | $86,000 |
Williamson | $547,000 |
Evie Wunsch | $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 |