Bootstrap 4 Tables Tweet

Bootstrap 4 includes some basic table stylings which are explained below.

Add class table to your table for basic table stylings.

<table class="table">
  <thead>
    <tr>
      <th>Firstname</th>
      <th>Lastname</th>
      <th>Email</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John</td>
      <td>Doe</td>
      <td>john@example.com</td>
    </tr>
    <tr>
      <td>Mary</td>
      <td>Moe</td>
      <td>mary@example.com</td>
    </tr>
  </tbody>
</table>

Firstname	Lastname	Email
John	Doe	john@example.com
Mary	Moe	mary@example.com

Add class table-dark to invert the style.

<table class="table table-dark">
  <thead>
    <tr>
      <th>Firstname</th>
      <th>Lastname</th>
      <th>Email</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John</td>
      <td>Doe</td>
      <td>john@example.com</td>
    </tr>
    <tr>
      <td>Mary</td>
      <td>Moe</td>
      <td>mary@example.com</td>
    </tr>
  </tbody>
</table>

Firstname	Lastname	Email
John	Doe	john@example.com
Mary	Moe	mary@example.com

Add class thead-light or thead-dark to the <thead> to make the thead appear light or dark.

<table class="table">
  <thead class="thead-dark">
    <tr>
      <th>Firstname</th>
      <th>Lastname</th>
      <th>Email</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John</td>
      <td>Doe</td>
      <td>john@example.com</td>
    </tr>
    <tr>
      <td>Mary</td>
      <td>Moe</td>
      <td>mary@example.com</td>
    </tr>
  </tbody>
</table>

Firstname	Lastname	Email
John	Doe	john@example.com
Mary	Moe	mary@example.com

Add class table-striped to the table to add zebra stripes to the <tbody>.

<table class="table table-striped">
  <thead class="thead-dark">
    <tr>
      <th>Firstname</th>
      <th>Lastname</th>
      <th>Email</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John</td>
      <td>Doe</td>
      <td>john@example.com</td>
    </tr>
    <tr>
      <td>Mary</td>
      <td>Moe</td>
      <td>mary@example.com</td>
    </tr>
  </tbody>
</table>

Firstname	Lastname	Email
John	Doe	john@example.com
Mary	Moe	mary@example.com
John	Doe	john@example.com
Mary	Moe	mary@example.com

Add class table-bordered to add borders on all sides of the table cells.

<table class="table table-striped table-dark table-bordered">
  <thead class="thead-light">
    <tr>
      <th>Firstname</th>
      <th>Lastname</th>
      <th>Email</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John</td>
      <td>Doe</td>
      <td>john@example.com</td>
    </tr>
    <tr>
      <td>Mary</td>
      <td>Moe</td>
      <td>mary@example.com</td>
    </tr>
  </tbody>
</table>

Firstname	Lastname	Email
John	Doe	john@example.com
Mary	Moe	mary@example.com
John	Doe	john@example.com
Mary	Moe	mary@example.com

Add class table-borderless to remove borders from a table.

<table class="table table-borderless">
  <thead class="thead-dark">
    <tr>
      <th>Firstname</th>
      <th>Lastname</th>
      <th>Email</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John</td>
      <td>Doe</td>
      <td>john@example.com</td>
    </tr>
    <tr>
      <td>Mary</td>
      <td>Moe</td>
      <td>mary@example.com</td>
    </tr>
  </tbody>
</table>

Firstname	Lastname	Email
John	Doe	john@example.com
Mary	Moe	mary@example.com

Add class table-hover to add hover effects to table.

<table class="table table-hover">
  <thead class="thead-dark">
    <tr>
      <th>Firstname</th>
      <th>Lastname</th>
      <th>Email</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John</td>
      <td>Doe</td>
      <td>john@example.com</td>
    </tr>
    <tr>
      <td>Mary</td>
      <td>Moe</td>
      <td>mary@example.com</td>
    </tr>
  </tbody>
</table>

Firstname	Lastname	Email
John	Doe	john@example.com
Mary	Moe	mary@example.com

Add class table-sm for a compact table.

<table class="table table-sm">
  <thead class="thead-dark">
    <tr>
      <th>Firstname</th>
      <th>Lastname</th>
      <th>Email</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John</td>
      <td>Doe</td>
      <td>john@example.com</td>
    </tr>
    <tr>
      <td>Mary</td>
      <td>Moe</td>
      <td>mary@example.com</td>
    </tr>
  </tbody>
</table>

Firstname	Lastname	Email
John	Doe	john@example.com
Mary	Moe	mary@example.com

Add contextual classes to table rows or cells to add contextual colors to the rows or cells. Classes table-* add faded background colors while classes bg-* add strong background colors. While adding contextual colors for individual cells make sure you add bg-* classes if the parent row has some contextual class as well.

<tr class="table-active"></tr>
<tr class="table-primary"></tr>
<tr class="table-secondary"></tr>
<tr class="table-success"></tr>
<tr class="table-danger"></tr>
<td class="bg-warning"></td>
<td class="bg-info"></td>
<td class="bg-light"></td>
<td class="bg-dark"></td>	

Class	Heading	Heading
Active	Cell	Cell
Default	Cell	Cell
Primary	Cell	Cell
Secondary	Cell	Cell
Success	Cell	Cell
Danger	Cell	Cell
Warning	Cell	Cell
Info	Cell	Cell
Light	Cell	Cell
Dark	Cell	Cell Primary

Add class table-resposive or its responsive variant table-resposive-* for a responsive table.

<table class="table table-responsive-sm">

You can also add a table caption using a <caption> element inside a table.

<table class="table table-sm">
  <caption>Random Names</caption>
  <thead class="thead-dark">
    <tr>
      <th>Firstname</th>
      <th>Lastname</th>
      <th>Email</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John</td>
      <td>Doe</td>
      <td>john@example.com</td>
    </tr>
    <tr>
      <td>Mary</td>
      <td>Moe</td>
      <td>mary@example.com</td>
    </tr>
  </tbody>
</table>

Random Names

Firstname	Lastname	Email
John	Doe	john@example.com
Mary	Moe	mary@example.com