Bootstrap 4 - Tables

The widespread use and necessity of tables on web pages have become a significant component in developing web pages. These tables are collections of related HTML tags, and that's why Bootstrap 4 applies styles to all related tags in a table element. In this tutorial, you will learn about the different concepts of Bootstrap for the table element.

Table of Contents

Bootstrapping the Tables

Tables can inherit Bootstrap styles and features, which create a clean table layout. Some HTML table elements that Bootstrap supports are:

HTML Tags Description
<table> This <table> tag wraps the data for displaying them in tabular format.
<tbody> This <tbody> tag is a container element for table row <tr>.
<thead> This <thead> tag is a container element for table header rows <th>.
<tr>, <td> and <th> These are some other tags that can be styled using Bootstrap.

Creating a Basic Table Style in Bootstrap 4

To apply a basic Bootstrap style to an HTML table, Bootstrap 4 has a class named .table.

Example:

<table class="table">
    <caption> Example of a table styled using the .table class in Bootstrap 4. </caption>
    <thead>
        <tr>
            <th> Name </th>
            <th> City </th>
            <th> Phone </th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td> Alex </td>
            <td> New York </td>
            <td> +1-321-654-0987 </td>
        </tr>
        <tr>
            <td> Vejey </td>
            <td> Bangaluru </td>
            <td> +91-1234567890 </td>
        </tr>
        <tr>
            <td> Suzane </td>
            <td> Toronto </td>
            <td> +1-123-456–7890 </td>
        </tr>
    </tbody>
</table>

Output:

Example of a table styled using the .table class in Bootstrap 4.
Name City Phone
Alex New York +1-321-654-0987
Vejey Bangaluru +91-1234567890
Suzane Toronto +1-123-456–7890

Striped Tables

The .table class adds basic style to the HTML table, and the developer can make it more stylish by adding a .table-striped a class that creates stripes on alternate rows.

Example:

<table class="table table-striped">
    <caption> Example of Striped table in Bootstrap 4. </caption>
    <thead>
        <tr>
            <th> Name </th>
            <th> City </th>
            <th> Phone </th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td> Alex </td>
            <td> New York </td>
            <td> +1-321-654-0987 </td>
        </tr>
        <tr>
            <td> Vejey </td>
            <td> Bangaluru </td>
            <td> +91-1234567890 </td>
        </tr>
        <tr>
            <td> Suzane </td>
            <td> Toronto </td>
            <td> +1-123-456–7890 </td>
        </tr>
    </tbody>
</table>

Output:

Example of Striped table in Bootstrap 4.
Name City Phone
Alex New York +1-321-654-0987
Vejey Bangaluru +91-1234567890
Suzane Toronto +1-123-456–7890

Table Hovering Effect

The .table-hover class gives a hovering effect when a user moves the mouse over the table rows; you may see the light gray background highlighting each row at a time depending on your mouse's cursor movement.

Example:

<table class="table table-hover">
    <caption> Example of a Table hovering effect in Bootstrap 4. </caption>
    <thead>
        <tr>
            <th> Name </th>
            <th> City </th>
            <th> Phone </th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td> Alex </td>
            <td> New York </td>
            <td> +1-321-654-0987 </td>
        </tr>
        <tr>
            <td> Vejey </td>
            <td> Bangaluru </td>
            <td> +91-1234567890 </td>
        </tr>
        <tr>
            <td> Suzane </td>
            <td> Toronto </td>
            <td> +1-123-456–7890 </td>
        </tr>
    </tbody>
</table>

Output:

Example of a Table hovering effect in Bootstrap 4.
Name City Phone
Alex New York +1-321-654-0987
Vejey Bangaluru +91-1234567890
Suzane Toronto +1-123-456–7890

Other Table Classes

Class Description
.table-bordered Every table element can be enclosed within a border using a .table-bordered class.
.table-sm The table size can be compacted using the .table-sm class. It reduces the padding of the table elements. It becomes useful when there is a need to display information in a small area.
.table-dark The .table-dark class creates a dark background for the table. It acts like a dark theme that is popular these days.

Contextual Classes in Bootstrap 4

These classes can be used to alter the background color of different rows or any specific cell. These classes can also be applied to <tr>, <td> and <th>. Here is a list of these Contextual classes:

  • .table-active
  • .table-primary
  • .table-secondary
  • .table-success
  • .table-danger
  • .table-warning
  • .table-info
  • .table-light
  • .table-dark

Example:

<table class="table">
    <thead>
        <tr>
            <th>Class</th>
            <th>Heading</th>
            <th>Heading</th>
        </tr>
    </thead>
    <tbody>
        <tr class="table-active">
            <td>.table-active</td>
            <td>-</td>
            <td>-</td>
        </tr>
        <tr>
            <td></td>
            <td>-</td>
            <td>-</td>
        </tr>
        <tr class="table-primary">
            <td>.table-primary</td>
            <td>-</td>
            <td>-</td>
        </tr>
        <tr class="table-secondary">
            <td>.table-secondary</td>
            <td>-</td>
            <td>-</td>
        </tr>
        <tr class="table-success">
            <td>.table-success</td>
            <td>-</td>
            <td>-</td>
        </tr>
        <tr class="table-danger">
            <td>.table-danger</td>
            <td>-</td>
            <td>-</td>
        </tr>
        <tr class="table-warning">
            <td>.table-warning</td>
            <td>-</td>
            <td>-</td>
        </tr>
        <tr class="table-info">
            <td>.table-info</td>
            <td>-</td>
            <td>-</td>
        </tr>
        <tr class="table-light">
            <td>.table-light</td>
            <td>-</td>
            <td>-</td>
        </tr>
        <tr class="table-dark">
            <td>.table-dark</td>
            <td>-</td>
            <td>-</td>
        </tr>
    </tbody>
</table>

Output:

Class Heading Heading
.table-active - -
- -
.table-primary - -
.table-secondary - -
.table-success - -
.table-danger - -
.table-warning - -
.table-info - -
.table-light - -
.table-dark - -

Responsive Table

The Bootstrap .table-responsive class makes a table responsive. This class can make any table scrollable horizontally, making the table fit even on small devices.

Example:

<div class="table-responsive">
    <table class="table">
        <caption>Responsive table example in Bootstrap 4. </caption>
        <thead>
            <tr>
                <th> Name </th>
                <th> City </th>
                <th> Phone </th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td> Alex </td>
                <td> New York </td>
                <td> +1-321-654-0987 </td>
            </tr>
            <tr>
                <td> Vejey </td>
                <td> Bangaluru </td>
                <td> +91-1234567890 </td>
            </tr>
            <tr>
                <td> Suzane </td>
                <td> Toronto </td>
                <td> +1-123-456–7890 </td>
            </tr>
        </tbody>
    </table>
</div>
Found This Page Useful? Share It!
Get the Latest Tutorials and Updates
Join us on Telegram