##### 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

Header | Header | Header
--- | --- | ---
A | First | Last
B | First | Last

3 | Larry | the Bird | @twitter
4 | Einar | Miller | @twitter
5 | Layne | Paucek | @twitter

##### 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