Introduced by Twitter, Bootstrap is an open-source UI framework for quickly building beautiful, responsive websites using HTML, CSS, Sass, and JavaScript. The latest released of Bootstrap is version 4 which includes many useful components & powerful plugins. It comes with opt-in table support.

To get started with Bootstrap 4 tables, just add the base class .table to any <table> HTML element. Then you can either use the default styles provided by Bootstrap team or use your own custom styles for tables.

Basic tables

Following is the basic markup example for Bootstrap 4 table.

<table class="table">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">Title</th>
      <th scope="col">Rating</th>
      <th scope="col">Release Year</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>The Godfather</td>
      <td>9.2</td>
      <td>1972</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>The Dark Knight</td>
      <td>9.0</td>
      <td>2008</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Inception</td>
      <td>8.7</td>
      <td>2010</td>
    </tr>
  </tbody>
</table>

The above code snippet will look like following:

Live Example

Dark tables

It is also possible to invert the colors — light text on dark backgrounds — with .table-dark class.

<table class="table table-dark">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">Title</th>
      <th scope="col">Rating</th>
      <th scope="col">Release Year</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>The Godfather</td>
      <td>9.2</td>
      <td>1972</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>The Dark Knight</td>
      <td>9.0</td>
      <td>2008</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Inception</td>
      <td>8.7</td>
      <td>2010</td>
    </tr>
  </tbody>
</table>

Here is how dark table looks like:

Live Example

Striped tables

You can use .table-striped class to add zebra-striping to any table element.

Live Example

Bordered tables

Bootstrap 4 provides .table-bordered class to add borders on all side of tables and cells.

Live Example

Borderless tables

It is also possible to remove borders. Use class .table-borderless for a table without borders.

Live Example

Hoverable tables

To add a grey background hover effect on table rows, add class .table-hover to table element.

Live Example

Small tables

To cut the cell padding by half, use class .table-sm for table element.

Live Example

Contextual classes

You can use Bootstrap 4 context classes to color table individual rows or cells. These class work for dark tables as well.

<!-- On rows -->
<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>
<tr class="table-warning">...</tr>
<tr class="table-info">...</tr>
<tr class="table-light">...</tr>
<tr class="table-dark">...</tr>

<!-- On cells (`td` or `th`) -->
<tr>
 <td class="table-active">...</td>
 
 <td class="table-primary">...</td>
 <td class="table-secondary">...</td>
 <td class="table-success">...</td>
 <td class="table-danger">...</td>
 <td class="table-warning">...</td>
 <td class="table-info">...</td>
 <td class="table-light">...</td>
 <td class="table-dark">...</td>
</tr>

Live Example

Responsive tables

Responsive tables allow tables to be scrolled horizontally with ease on small screen devices. You can make any table responsive across all viewports by wrapping a .table with .table-responsive class. It is also possible to pick a maximum breakpoint with which to have a responsive table up to by using .table-responsive{-sm|-md|-lg|-xl}.

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

Conclusion

That's all for Bootstrap 4 tables. There are multiple variations available for Bootstrap 4 tables. Go create some tables now and enjoy!