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 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.

<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.

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

---

Striped Rows

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

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

---

Bordered Table

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

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

---

Hoverable Rows

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

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

---

Compact Table

Add .table-sm to 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 .table with .table-responsive.

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