Documentation and examples for opt-in styling of tables(given their prevalent use in JavaScript plugins) with Bootstrap. Read the Official Bootstrap Documentationfor a full list of instructions and other options.
Basic Example
Using the most basic table markup,here’s how .tablebased tables look in Bootstrap. All table styles are inherited in Bootstrap 4,meaning any nested tables will be styled in the same manner as the parent.
|
ID
|
Name
|
Job Title
|
Degree
|
Salary
|
|
1
|
Adrian Monino
|
Front-End Engineer
|
Computer Science
|
$120,000
|
|
2
|
Socrates Itumay
|
Software Engineer
|
Computer Engineering
|
$150,000
|
|
3
|
Reynante Labares
|
Product Manager
|
Business Management
|
$250,000
|
|
4
|
Hamza Macasindil
|
Software Engineer
|
Computer Engineering
|
$140,000
|
|
5
|
Roven Galeon
|
Project Manager
|
Accountancy
|
$160,000
|
Table Head Options
Similar to tables and dark tables,use the modifier classes .thead-primaryor .thead-darkto make colored head.
|
ID
|
Name
|
Job Title
|
Degree
|
Salary
|
|
1
|
Adrian Monino
|
Front-End Engineer
|
Computer Science
|
$120,000
|
|
2
|
Socrates Itumay
|
Software Engineer
|
Computer Engineering
|
$150,000
|
|
3
|
Reynante Labares
|
Product Manager
|
Business Management
|
$250,000
|
Striped Rows
Use .table-stripedto add zebra-striping to any table row within the tbody.
|
ID
|
Name
|
Job Title
|
Degree
|
Salary
|
|
1
|
Adrian Monino
|
Front-End Engineer
|
Computer Science
|
$120,000
|
|
2
|
Socrates Itumay
|
Software Engineer
|
Computer Engineering
|
$150,000
|
|
3
|
Reynante Labares
|
Product Manager
|
Business Management
|
$250,000
|
|
4
|
Hamza Macasindil
|
Software Engineer
|
Computer Engineering
|
$140,000
|
|
5
|
Roven Galeon
|
Project Manager
|
Accountancy
|
$160,000
|
Bordered Table
Add .table-borderedfor borders on all sides of the table and cells.
|
ID
|
Name
|
Job Title
|
Degree
|
Salary
|
|
1
|
Adrian Monino
|
Front-End Engineer
|
Computer Science
|
$120,000
|
|
2
|
Socrates Itumay
|
Software Engineer
|
Computer Engineering
|
$150,000
|
|
3
|
Reynante Labares
|
Product Manager
|
Business Management
|
$250,000
|
|
4
|
Hamza Macasindil
|
Software Engineer
|
Computer Engineering
|
$140,000
|
|
5
|
Roven Galeon
|
Project Manager
|
Accountancy
|
$160,000
|
Hoverable Rows
Add .table-hoverto enable a hover state on table rows within a tbody.
|
ID
|
Name
|
Job Title
|
Degree
|
Salary
|
|
1
|
Adrian Monino
|
Front-End Engineer
|
Computer Science
|
$120,000
|
|
2
|
Socrates Itumay
|
Software Engineer
|
Computer Engineering
|
$150,000
|
|
3
|
Reynante Labares
|
Product Manager
|
Business Management
|
$250,000
|
|
4
|
Hamza Macasindil
|
Software Engineer
|
Computer Engineering
|
$140,000
|
|
5
|
Roven Galeon
|
Project Manager
|
Accountancy
|
$160,000
|
Compact Table
Add .table-smto make tables more compact by cutting cell padding in half.
|
ID
|
Name
|
Job Title
|
Degree
|
Salary
|
|
1
|
Adrian Monino
|
Front-End Engineer
|
Computer Science
|
$120,000
|
|
2
|
Socrates Itumay
|
Software Engineer
|
Computer Engineering
|
$150,000
|
|
3
|
Reynante Labares
|
Product Manager
|
Business Management
|
$250,000
|
|
4
|
Hamza Macasindil
|
Software Engineer
|
Computer Engineering
|
$140,000
|
|
5
|
Roven Galeon
|
Project Manager
|
Accountancy
|
$160,000
|
Colored Variations
Use contextual classes to color entire table.
|
ID
|
Name
|
Job Title
|
Degree
|
Salary
|
|
1
|
Adrian Monino
|
Front-End Engineer
|
Computer Science
|
$120,000
|
|
2
|
Socrates Itumay
|
Software Engineer
|
Computer Engineering
|
$150,000
|
|
3
|
Reynante Labares
|
Product Manager
|
Business Management
|
$250,000
|
|
4
|
Hamza Macasindil
|
Software Engineer
|
Computer Engineering
|
$140,000
|
|
5
|
Roven Galeon
|
Project Manager
|
Accountancy
|
$160,000
|
|
ID
|
Name
|
Job Title
|
Degree
|
Salary
|
|
1
|
Adrian Monino
|
Front-End Engineer
|
Computer Science
|
$120,000
|
|
2
|
Socrates Itumay
|
Software Engineer
|
Computer Engineering
|
$150,000
|
|
3
|
Reynante Labares
|
Product Manager
|
Business Management
|
$250,000
|
|
4
|
Hamza Macasindil
|
Software Engineer
|
Computer Engineering
|
$140,000
|
|
5
|
Roven Galeon
|
Project Manager
|
Accountancy
|
$160,000
|
Responsive Table
Responsive tables allow tables to be scrolled horizontally with ease. Make any table responsive across all viewports by wrapping a .tablewith .table-responsive.
|
ID
|
Name
|
Job Title
|
Degree
|
Salary
|
|
1
|
Adrian Monino
|
Front-End Engineer
|
Computer Science
|
$120,000
|
|
2
|
Socrates Itumay
|
Software Engineer
|
Computer Engineering
|
$150,000
|
|
3
|
Reynante Labares
|
Product Manager
|
Business Management
|
$250,000
|
|
4
|
Hamza Macasindil
|
Software Engineer
|
Computer Engineering
|
$140,000
|
|
5
|
Roven Galeon
|
Project Manager
|
Accountancy
|
$160,000
|