BOOTSTRAP 4 TABLE

❮ Prev Next ❯

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	[email protected]	123456	123,456,789,123,abc,def,ghi	12/12/2012	$100,000
A2	Leo	Dupont	[email protected]	123456	123,456,789,123,abc,def,ghi	12/12/2012	$100,000
A3	Jimmy	Dupont	[email protected]	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>[email protected]</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>[email protected]</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>[email protected]</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:

.table-primary - table row has a primary color background
.table-secondary - table row has a secondary color background
.table-success - table row has a green background
.table-warning - table row has a yellow background
.table-danger - table row has a red background
.table-info - table row has a blue background
.table-light - table row has a light gray background
.table-dark - table row has a dark gray background

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:

.table - a base class for tables
.table-bordered - a table with borders
.table-striped - a table with striped rows
.table-hover - a table with hover effect
.table-condensed - a table with reduced whitespace
.table-responsive - a table with responsive behavior

Points to remember:

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

❮ Prev Next ❯