Tutorials Tonight
Follow Us

BOOTSTRAP 4 TABLE


Bootstrap provides a bunch of classes to create a nice table. In this tutorial, we will learn how to create a table with bootstrap. We will also learn how to create a table with a custom style.

Bootstrap Table

The table is a great way to display a set of data in a tabular format. It is a good way to display tabular data, such as a table of records, in a way that is easy to scan, sort, and filter.

The use of tables is widespread like calendars, date pickers, telephone directories, etc so, bootstrap has designed its table to be very flexible.

The bootstrap table is a table component for Bootstrap 4. It is built on top of the HTML5 table element. It is designed to be flexible, but also to be a good starting point for building your own tables. It includes classes for responsive tables and a wide variety of options for styling the table.

To create a table, add the <table> element to your HTML. Then, use the <thead> element to wrap the table headers, and the <tbody> element to wrap the table rows. To create a table header, add the <th> element to the <thead> element. To create a table row, add the <tr> element to the <tbody> element. To create a table cell, add the <td> element to the <tr> element.

Here is an example of a simple table with the .table class used on it.

Id User Age
A1 Jean 25
A2 Leo 32
A3 Jimmy 21

Code:

Example

<table class="table">
  <thead>
    <tr>
      <th>Id</th>
      <th>User</th>
      <th>Age</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>A1</td>
      <td>Jean</td>
      <td>25</td>
    </tr>
    <tr>
      <td>A2</td>
      <td>Leo</td>
      <td>32</td>
    </tr>
    <tr>
      <td>A3</td>
      <td>Jimmy</td>
      <td>21</td>
    </tr>
  </tbody>
</table>
▶ Run the code

Bordered Table

To create a table with borders use .table-bordered class together with .table class. Add the <table class="table-bordered"> element to your HTML.

Here is an example:

Id User Age
A1 Jean 25
A2 Leo 32
A3 Jimmy 21

Code:

Example

<table class="table table-bordered">
  <thead>
    <tr>
      <th>Id</th>
      <th>User</th>
      <th>Age</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>A1</td>
      <td>Jean</td>
      <td>25</td>
    </tr>
    <tr>
      <td>A2</td>
      <td>Leo</td>
      <td>32</td>
    </tr>
    <tr>
      <td>A3</td>
      <td>Jimmy</td>
      <td>21</td>
    </tr>
  </tbody>
</table>
▶ Run the code

Bordered Striped

To create a zebra strip like appearance on odd rows of table body use .table-striped class with .table class on table.

If you also want to add borders to the table, add .table-bordered class to the table.

Id User Age
A1 Jean 25
A2 Leo 32
A3 Jimmy 21

Code:

Example

<table class="table table-striped table-bordered">
  <thead>
    <tr>
      <th>Id</th>
      <th>User</th>
      <th>Age</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>A1</td>
      <td>Jean</td>
      <td>25</td>
    </tr>
    <tr>
      <td>A2</td>
      <td>Leo</td>
      <td>32</td>
    </tr>
    <tr>
      <td>A3</td>
      <td>Jimmy</td>
      <td>21</td>
    </tr>
  </tbody>
</table>
▶ Run the code

Bootstrap Table Hover

The class .table-hover enables a hover effect on table row within <tbody>.

When you hover the mouse over a row, the row's background color changes to #f5f5f5.

Id User Age
A1 Jean 25
A2 Leo 32
A3 Jimmy 21

Code:

Example

<table class="table table-hover">
  <thead>
    <tr>
      <th>Id</th>
      <th>User</th>
      <th>Age</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>A1</td>
      <td>Jean</td>
      <td>25</td>
    </tr>
    <tr>
      <td>A2</td>
      <td>Leo</td>
      <td>32</td>
    </tr>
    <tr>
      <td>A3</td>
      <td>Jimmy</td>
      <td>21</td>
    </tr>
  </tbody>
</table>
▶ Run the code

Bootstrap Table Borderless

The class .table-borderless removes the border around the table. It is useful for tables that have a fixed width.

Id User Age
A1 Jean 25
A2 Leo 32
A3 Jimmy 21

Code:

Example

<table class="table table-borderless">
  <thead>
    <tr>
      <th>Id</th>
      <th>User</th>
      <th>Age</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>A1</td>
      <td>Jean</td>
      <td>25</td>
    </tr>
    <tr>
      <td>A2</td>
      <td>Leo</td>
      <td>32</td>
    </tr>
    <tr>
      <td>A3</td>
      <td>Jimmy</td>
      <td>21</td>
    </tr>
  </tbody>
</table>
▶ Run the code

Dark Table

You can create dark background and light text table by adding an extra bootstrap class .table-dark to <table> element.

Id User Age
A1 Jean 25
A2 Leo 32
A3 Jimmy 21

Code:

Example

<table class="table table-dark">
  <thead>
    <tr>
      <th>Id</th>
      <th>User</th>
      <th>Age</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>A1</td>
      <td>Jean</td>
      <td>25</td>
    </tr>
    <tr>
      <td>A2</td>
      <td>Leo</td>
      <td>32</td>
    </tr>
    <tr>
      <td>A3</td>
      <td>Jimmy</td>
      <td>21</td>
    </tr>
  </tbody>
</table>
▶ Run the code


You can also use .table-stripped, .table-bordered, .table-hover and .table-borderless with .table-dark class to get those effect in dark table.

Here is an example of a dark table hover.

Id User Age
A1 Jean 25
A2 Leo 32
A3 Jimmy 21

Code:

Example

<table class="table table-hover table-dark">
  <thead>
    <tr>
      <th>Id</th>
      <th>User</th>
      <th>Age</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>A1</td>
      <td>Jean</td>
      <td>25</td>
    </tr>
    <tr>
      <td>A2</td>
      <td>Leo</td>
      <td>32</td>
    </tr>
    <tr>
      <td>A3</td>
      <td>Jimmy</td>
      <td>21</td>
    </tr>
  </tbody>
</table>
▶ Run the code

Dark and Light Table Head

Similarly, like the dark and light table, you can create a dark head and light head using bootstrap classes.

To create dark head use .thead-dark class and to create light head use .thead-light class in <thead> tag.

Id User Age
A1 Jean 25
A2 Leo 32
A3 Jimmy 21

Code:

Example

<table class="table">
  <thead class="thead-dark">
    <tr>
      <th>Id</th>
      <th>User</th>
      <th>Age</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>A1</td>
      <td>Jean</td>
      <td>25</td>
    </tr>
    <tr>
      <td>A2</td>
      <td>Leo</td>
      <td>32</td>
    </tr>
    <tr>
      <td>A3</td>
      <td>Jimmy</td>
      <td>21</td>
    </tr>
  </tbody>
</table>
▶ Run the code

Responsive Table

Bootstrap tables can be responsive. Means, when you have more column in the table, the table on a smaller screen, would become scrollable.

To make the table responsive, use .table-responsive class in <div> tag and put your <table> tag inside it.

Id First Name Last Name Mail Password Address Created salary
A1 Jean Dupont jean_ABC@gmail.com 123456 123,456,789,123,abc,def,ghi 12/12/2012 $100,000
A2 Leo Dupont Leo_ABC@gmail.com 123456 123,456,789,123,abc,def,ghi 12/12/2012 $100,000
A3 Jimmy Dupont jimmy_ABC@gmail.com 123456 123,456,789,123,abc,def,ghi 12/12/2012 $100,000

Code:

Example

<div class="table-responsive">
  <table class="table">
    <thead>
      <tr>
        <th>Id</th>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Mail</th>
        <th>Password</th>
        <th>Address</th>
        <th>Created</th>
        <th>salary</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>A1</td>
        <td>Jean</td>
        <td>Dupont</td>
        <td>jean_ABC@gmail.com</td>
        <td>123456</td>
        <td>123,456,789,123,abc,def,ghi</td>
        <td>12/12/2012</td>
        <td>$100,000</td>
      </tr>
      <tr>
        <td>A2</td>
        <td>Leo</td>
        <td>Dupont</td>
        <td>Leo_ABC@gmail.com</td>
        <td>123456</td>
        <td>123,456,789,123,abc,def,ghi</td>
        <td>12/12/2012</td>
        <td>$100,000</td>
      </tr>
      <tr>
        <td>A3</td>
        <td>Jimmy</td>
        <td>Dupont</td>
        <td>jimmy_ABC@gmail.com</td>
        <td>123456</td>
        <td>123,456,789,123,abc,def,ghi</td>
        <td>12/12/2012</td>
        <td>$100,000</td>
      </tr>
    </tbody>
  </table>
</div>
▶ Run the code

Adding contextual classes to tables

Bootstrap provides a set of classes to help you define the context of the row in the table.

These contextual classes are used to add color and background color to rows in tables.

The classes are:

Example:

Example

<table class="table">
  <thead>
    <tr>
      <th>Class</th>
      <th>Description</th>
    </tr>
  </thead>
  <tbody>
    <tr class="table-primary">
      <td><code>.table-primary</code></td>
      <td>Adds a green skyblue color and a white text color to a row</td>
    </tr>
    <tr class="table-secondary">
      <td><code>.table-secondary</code></td>
      <td>Adds a grey color and a white text color to a row</td>
    </tr>
    <tr class="table-success">
      <td><code>.table-success</code></td>
      <td>Adds a green color and a white text color to a row</td>
    </tr>
    <tr class="table-info">
      <td><code>.table-info</code></td>
      <td>Adds a blue color and a white text color to a row</td>
    </tr>
    <tr class="table-warning">
      <td><code>.table-warning</code></td>
      <td>Adds a yellow color and a white text color to a row</td>
    </tr>
    <tr class="table-danger">
      <td><code>.table-danger</code></td>
      <td>Adds a red color and a white text color to a row</td>
    </tr>
  </tbody>
</table>
▶ Run the code

Conclusion

Bootstrap provides a set of classes to help you create tables. These classes are:

Points to remember:

  1. Use .table class to create a basic bootstrap table.
  2. To create a border around table and cell use .table-bordered class.
  3. To get zebra-strips on row use .table-striped class.
  4. For borderless table use .table-borderless class.
  5. .table-hover creates a hover effect on the table.
  6. Use .table-dark class to create a dark table.
  7. For creating the dark head of the table use .thead-dark and to get light head use .thead-light in <thead> tag.
  8. Use .table-responsive class to make tables responsive. It will hide the table header and make the table scrollable.