Documentation and examples for opt-in styling of tables (given their prevalent use in JavaScript plugins) with Bootstrap. Read the Official Bootstrap Documentation for a full list of instructions and other options.
Basic Example
Using the most basic table markup, here’s how .table based 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-primary or .thead-dark to 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-striped to 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-bordered for 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-hover to 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-sm to 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 .table with .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 |
