Bootstrap 4 Tables Tutorial

Bootstrap allows to create beautiful tables using the CSS framework. Version 4 has some new classes for inverting the table color and making the table responsive. In this tutorial we will discuss various possibilities of creating Bootstrap 4 tables.

Download All Table Codes View Live Demo

Default Bootstrap 4 Table

Bootstrap table uses all HTML table tags with the header inside <thead> and the body of the table inside <tbody> tags. In our example, let us create simple mark sheet in a table format with four student names (in rows) and five subjects with average percentage (in columns). Below is the code for default Bootstrap table.

<!DOCTYPE html>
<html lang="en">
<head>
<!-- Meta Tags for Bootstrap 4 -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap 4 CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
<!-- Start of Table -->
<table class="table">
<thead>
<tr>
<th>Student Name</th>
<th>Sub1</th>
<th>Sub2</th>
<th>Sub3</th>
<th>Sub4</th>
<th>Sub5</th>
<th>%</th>
</tr>
</thead>
<tbody> <tr>
<td>Thomas</td>
<td>80</td>
<td>90</td>
<td>70</td>
<td>80</td>
<td>75</td>
<td>79</td>
</tr> <tr>
<td>Peter</td>
<td>100</td>
<td>90</td>
<td>68</td>
<td>75</td>
<td>89</td>
<td>84.4</td>
</tr>
<tr>
<td>John</td>
<td>55</td>
<td>43</td>
<td>57</td>
<td>76</td>
<td>45</td>
<td>55.2</td>
</tr>
<tr>
<td>Kelly</td>
<td>84</td>
<td>76</td>
<td>89</td>
<td>76</td>
<td>90</td>
<td>83</td>
</tr>
</tbody>
</table>
<!-- End of Table -->
<!-- Bootstrap 4 Scripts -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>

By default the only CSS class required for creating a Bootstrap table is the “table” class applied directly on the HTML table element. You don’t need to create a <div> tag for inserting tables in Bootstrap. The default tag will produce the following result:

Default Bootstrap Table

Offer: Get 92% discount of Mobirise Bootstrap site builder.

Inverting the Table Colors

Bootstrap 4 allows you to invert the color of your table by adding “table-inverse” to the <table> tag. It will invert the background to dark and the text to light colors. The code should look like below:

<table class=”table table-inverse“>

All content remains same here similar to default table.

Related:  Basics of Bidvertiser Advertising

<table>

The inverse table will have very dark and attractive background as shown below:

Bootstrap Inverse Table

Inverse Header Table

In previous case the “table-inverse” class was applied to the entire table. Bootstrap 4 also allows to invert only the header background and text colors. In order to invert the header just add the “thead-inverse” class to the <thead> tag.

<table class=”table”>
<thead class=”thead-inverse”>

</thead>

</table>

And our mark sheet table will have a black header row like below:

Bootstrap Inverse Header Table

That’s not all!!! There are many more options with Bootstrap. Let us create some more variations.

Striped Bootstrap 4 Table

Striped table allows you to create alternate colors for the rows. Just add “table-striped” to the existing “table” class” and the table will have striping pattern. The light grey background color will be applied to all odd numbered rows starting from the first row.

<table class=”table table-striped“>

</table>

Striped table is mostly preferred to differentiate the rows and showcase the content to visitors.

Bootstrap Bordered Table

This one will simple add the border to the default table. What you need is to append “table-bordered” class to the existing “table” class.

<table class=”table table-bordered“>

</table>

Our mark sheet table with border should look like below:

Bootstrap Bordered Table

You can also easily create the bordered table with stripes on rows.

<table class=”table table-striped table-bordered“>

</table>

Table with Hover Effects on Rows

How about adding hover effects to your table? The “table-hover” class will do that for you. Hover the mouse over the table to see the corresponding row is highlighted with light grey background color.

<table class=”table table-hover“>

</table>

Below is how your table should look when you move the mouse on second row.

Bootstrap Row Hover Effect Table

Responsive Bootstrap Table for Smaller than 768 Pixel Devices

Creating a responsive table in Bootstrap 4 is very simple. You don’t need to add additional <div> for adding responsiveness. Just insert “table-responsive” class,  a horizontal scroll bar will be automatically added to the table when viewed on the browser below 768 pixels screen size.

Related:  What is CPC and Why it is Important in Advertising?

<table class=”table table-responsive“>

</table>

Here is how our responsive table will be looking. Remember the horizontal scroll bar will only appear when the table is viewed with the screen size smaller than 768 pixel. Otherwise you will not find any difference compared to regular Bootstrap table.

Bootstrap Responsive Table

Download All Table Codes View Live Demo

Bootstrap Table with Compressed Text

Sometimes it is necessary to compress the height of the table to reduce the space occupied. Bootstrap allows to do this by adding “table-sm” class to an existing “table” class as shown below:

<table class=”table table-sm“>

</table>

This will remove the padding and make the table height compact.

Creating Bootstrap Table with Background Color

As of now, what we have discussed is to create simple table or to have default light grey background for rows. Bootstrap also enables coloring your table cells and rows to make it beautiful. You can highlight any rows or any cells of your table in five different colors. There are two set of CSS classes that help you to add background colors – one is contextual classes and other is background utility classes. The below table explains different options available:

Table Contextual Classes
table-activeLight grey hover color
table-successLight green success or positive action
table-infoLight blue for information message
table-warningLight yellow for indicating warning
table-dangerLight red for indicating danger
table-primaryLight blue for indicating primary color in Bootstrap
table-secondaryLight red for indicating danger
table-lightLight gray for indicating no color
table-darkLight black for indicating dark

 

Background Utility / Contextual Classes
bg-primaryMedium blue as primary color
bg-successForest green for success
bg-warning
Free speech green color for warning
bg-infoLight sea green for information
bg-dangerRed (Cinnabar) for danger
bg-lightSolitude for light
bg-darkMirage color for dark
bg-secondaryAluminium color for secondary
Related:  A Beginners Guide to Google Analytics

Remember these classes can be applied to individual rows and cells of Bootstrap table in any combination.

Offer: Get 92% discount of Mobirise Bootstrap site builder.

Colored Rows with Contextual Classes

Let us apply the contextual classes on our mark sheet table to see them on action. Below code applies “table-active” class to the first row of the table to change the background color to light grey.

<table class=”table”>

<tr class=”table-active”>
<td>Thomas</td>
<td>80</td>
<td>90</td>
<td>70</td>
<td>80</td>
<td>75</td>
<td>79</td>
</tr> <tr>

</table>

Below is how the complete table will look when you apply “table-success”, “table-warning” and “table-danger” classes to second, third and fourth <tr> elements of the table.

Bootstrap 4 Tables with Contextual Classes

Colored Rows with Background Colors

Similar to table contextual classes, you can apply background colors to rows using background contextual classes.

<table class=”table”>

<tr class=”bg-success”>
<td>Thomas</td>
<td>80</td>
<td>90</td>
<td>70</td>
<td>80</td>
<td>75</td>
<td>79</td>
</tr> <tr>

</table>

Below is an eye catching table has “bg-success”, “bg-danger”, “bg-warning”, “bg-info” and other background utility classes applied to the rows.

Bootstrap 4 Tables with Background Colors

Colored Cells with Contextual Classes

Each cell of a Bootstrap table can be applied with one of the contextual classes to highlight it from other cells. This will be really useful when you have bigger table and wanted to highlight only few cells. Below code shows applying the “table-active” contextual class to a table cell.

<table class=”table”>

<tr>
<td>Thomas</td>
<td class=”table-active”>80</td>
<td>90</td>
<td>70</td>
<td>80</td>
<td>75</td>
<td>79</td>
</tr> <tr>

</table>

Below table has four cells applied with different background colors randomly.

Bootstrap Table with Contextual Classes Used for Cells

Colored Rows and Cells with Background Colors and Contextual Classes

Finally you can apply table contextual class and background contextual class in any combination to make different background colors for rows and cells.

<table class=”table”>

<tr class=”table-active”>
<td>Thomas</td>
<td class=”table-info”>80</td>
<td>90</td>
<td>70</td>
<td>80</td>
<td>75</td>
<td class=”bg-success”>79</td>
</tr> <tr>

</table>

Here is how the example table will look like with various colors applied for rows and cells.

Bootstrap Table with Contextual and Background Colors

Download All Table Codes View Live Demo

Recommended Articles:

1 thought on “Bootstrap 4 Tables Tutorial”

Leave a Comment