Basic Table

Simple Table

Using the most basic table need to add .table 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 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
Hoverable Table

Using the Hoverable table need to add 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
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
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
Primary Table With Striped

Using the primary table need to add .table-primary 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
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 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
6 Williamson Integration New York 61 $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 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 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

Across every breakpoint, use .table-responsive for horizontally scrolling tables.

Breakpoint specific

Use .table-responsive{-sm|-md|-lg|-xl|-xxl} as needed to create responsive tables up to a particular breakpoint. From that breakpoint and up, the table will behave normally and not scroll horizontally.

# 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