Tables in Bootstrap 4

Since there are widespread use and requirement of tables on web pages, it has become a significant component in developing web pages. There are collections of HTML tags that deal with these tables. And this is the reason why Bootstrap 4 has inherited all the table styles that can be incorporated within your web page's table elements. In this chapter, you will learn about the different concepts of Bootstrap for the table element.

Bootstrapping the Tables

Tables can inherit the bootstrap features which makes a clean table layout on your web page. Some of the HTML table elements that the Bootstrap support are:

HTML TagsDescription
<table>This element wraps the data for displaying them in tabular format.
<tbody>This acts as a container element for rows in table <tr>.
<thead>This acts as a container element for table header rows.
<tr>, <td> and <th>These are some other elements where Bootstrap features can be applied.

Creating a Basic Table Style in Bootstrap 4

To create the basic style of the HTML table, Bootstrap 4 has a class named .table.

Example:
<table class="table">
<caption> Example of basic 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> 2034938411 </td>
    </tr> 
    <tr>
        <td> Vejey </td>
        <td> Bangaluru </td>
        <td> 8723495860 </td>
    </tr>
    <tr>
        <td> Suzane </td>
        <td> Toronto </td>
        <td> 3002298484 </td>
    </tr>
</tbody>
</table>

Striped Rows in a Table

The .table class adds basic style to the HTML table, and the developer can make it more stylish by adding a .table-striped class.  This .table-striped class is used for creating stripes on alternate rows.

Example:
<table class="table table-striped">
<caption> Example of Table with striped Layout 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> 2034938411 </td>
    </tr> 
    <tr>
        <td> Vejey </td>
        <td> Bangaluru </td>
        <td> 8723495860 </td>
    </tr>
    <tr>
        <td> Suzane </td>
        <td> Toronto </td>
        <td> 3002298484 </td>
    </tr>
</tbody>
</table>

Table Hovering Effect

The .table-hover class is used to give a hovering effect when you move your mouse over the rows; you can see the light gray background highlighting each row at a time based on your mouse's cursor movement.

Example:
<table class="table table-hover">
<caption>Example of hovering effect in table rows 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> 2034938411 </td>
    </tr> 
    <tr>
        <td> Vejey </td>
        <td> Bangaluru </td>
        <td> 8723495860 </td>
    </tr>
    <tr>
        <td> Suzane </td>
        <td> Toronto </td>
        <td> 3002298484 </td>
    </tr>
</tbody>
</table>

Other Table Classes

  • Table with border: Every element of a table can be enclosed within a border with the use of a .table-bordered class. It is applied like this: <table class = "table table-bordered">
  • Condensed table: The size of the table can be concise down into half by the use of a .table-condensed class. It becomes useful when you have to display a lot of information in a specific area. It can be applied like this: <table class = "table table-condensed">
  • Dark Table: This is used to create a black background to your table. It acts like a dark theme that is popular these days. It can be applied like this: <table class = "table table-dark">. Also, if you wish to use the hover feature in the dark theme, use this: <table class = "table table-dark table-hover">.

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>. List of these classes are:

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

Responsive Table

You can also create responsive tables using Bootstrap's .table-responsive class. This will make your table scrollable (horizontally) and hence fits your table in small devices also. To implement this, the structure is:

Example:
<div class="table-responsive">
<table class="table table-hover">
<caption>Example of responsive 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> 2034938411 </td>
    </tr> 
    <tr>
        <td> Vejey </td>
        <td> Bangaluru </td>
        <td> 8723495860 </td>
    </tr>
    <tr>
        <td> Suzane </td>
        <td> Toronto </td>
        <td> 3002298484 </td>
    </tr>
</tbody>
</table>
</div>

Scroll Back to Top