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
  • avatar
  • avatar
  • avatar
$320,800
2 Garrett Accountant Tokyo
  • avatar
  • avatar
  • avatar
$170,750
3 Ashton Cox Technical Francisco
  • avatar
  • avatar
  • avatar
$86,000
4 Evert Developer New York
  • avatar
  • avatar
  • avatar
$36,000
5 Murazik Accountant New York
  • avatar
  • avatar
  • avatar
$62,000
6 Williamson Developer New York
  • avatar
  • avatar
  • avatar
$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