1. Components
2. UI Elements
3. Table Basic

Table Basic

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.

<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-primaryor .thead-darkto make colored head.

<thead class="thead-primary">...</thead>

Striped Rows

Use .table-stripedto add zebra-striping to any table row within the tbody.

<table class="table table-striped">...</table>

Bordered Table

Add .table-borderedfor borders on all sides of the table and cells.

<table class="table table-bordered">...</table>

Hoverable Rows

Add .table-hoverto enable a hover state on table rows within a tbody.

<table class="table table-hover">...</table>

Compact Table

Add .table-smto make tables more compact by cutting cell padding in half.

<table class="table table-sm">...</table>

Colored Variations

Use contextual classes to color entire table.

<table class="table table-[color]">...</table>

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.

<div class="table-responsive">  <table class="table">...</table></div>