Table Basic

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 class="table">
  <thead>
    <tr>
      <th scope="col">ID</th>
      <th scope="col">Name</th>
      <th scope="col">Job Title</th>
      <th scope="col">Degree</th>
      <th scope="col">Salary</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Adrian Monino</td>
      <td>Front-End Engineer</td>
      <td>Computer Science</td>
      <td>$120,000</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Socrates Itumay</td>
      <td>Software Engineer</td>
      <td>Computer Engineering</td>
      <td>$150,000</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Reynante Labares</td>
      <td>Product Manager</td>
      <td>Business Management</td>
      <td>$250,000</td>
    </tr>
  </tbody>
</table>

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
<thead class="thead-primary">...</thead>
Class Reference Color
class="thead-[color]" primary | secondary | success | danger | warning | info | light | dark

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
<table class="table table-striped">...</table>

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
<table class="table table-bordered">...</table>

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
<table class="table table-hover">...</table>

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
<table class="table table-sm">...</table>

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
<table class="table table-[color]">...</table>
Class Reference Color
class="table table-[color]" primary | secondary | success | danger | warning | info | light | dark

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
<div class="table-responsive">
  <table class="table">...</table>
</div>