Bootstrap 4 Tables Tutorial With Example

by

In this example you will learn how to create bootstrap 4 tables tutorial with example. The HTML tables are used to display data in a grid manner like row and columns. Bootstrap 4 makes changes to how tables are styled.

Bootstrap 4 Tables Tutorial With Example

#1: Bootstrap 4 Basic Table

A primary Bootstrap 4 table has a light padding and horizontal dividers, apply Bootstrap’s .table class to the <table> element.

Now we can see the basic example of bootstrap 4 table.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 4 Tables Tutorial With Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<h2>Basic Table</h2>
<table class="table">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Cristiano</td>
        <td>Ronaldo</td>
        <td>cristiano@example.com</td>
      </tr>
      <tr>
        <td>Leo</td>
        <td>Messi</td>
        <td>leo@example.com</td>
      </tr>
      <tr>
        <td>Luka</td>
        <td>Modric</td>
        <td>luka@example.com</td>
      </tr>
    </tbody>
  </table>
</body>
</html>

The output of the above example will look something like this:

bootstrap 4 tables example

#2: Bootstrap 4 Tables with Striped Rows

You can create the table with an alternate background like zebra-stripes by simply adding the Bootstrap’s class .table-striped to the .table base class.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 4 Tables Tutorial With Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<h2>Basic Table</h2>
<table class="table table-striped">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Cristiano</td>
        <td>Ronaldo</td>
        <td>cristiano@example.com</td>
      </tr>
      <tr>
        <td>Leo</td>
        <td>Messi</td>
        <td>leo@example.com</td>
      </tr>
      <tr>
        <td>Luka</td>
        <td>Modric</td>
        <td>luka@example.com</td>
      </tr>
    </tbody>
  </table>
</body>
</html>
The output of the above example will look like tht:

The output of the above example will looks like below screenshot.

bootstrap 4 tables tutorial

#3: Bootstrap 4 Tables with Borders

We can also add borders to all table cells by adding an extra Bootstrap’s class .table-borderedto the .table base class.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 4 Tables Tutorial With Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<h2>Bordered Table</h2>
<table class="table table-bordered">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Cristiano</td>
        <td>Ronaldo</td>
        <td>cristiano@example.com</td>
      </tr>
      <tr>
        <td>Leo</td>
        <td>Messi</td>
        <td>leo@example.com</td>
      </tr>
      <tr>
        <td>Luka</td>
        <td>Modric</td>
        <td>luka@example.com</td>
      </tr>
    </tbody>
  </table>
</body>
</html>

The output of the above example will looks like that.

bootstrap 4 borderd tables example

#4: Bootstrap 4 Tables with Hover Rows

Bootstrap 4 offers an option of adding a hover effect to the table using the .table-hover class. The .table-hover class adds a grey background color on table rows.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 4 Tables Tutorial With Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<h2>Hover Rows</h2>
<table class="table table-hover">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Cristiano</td>
        <td>Ronaldo</td>
        <td>cristiano@example.com</td>
      </tr>
      <tr>
        <td>Leo</td>
        <td>Messi</td>
        <td>leo@example.com</td>
      </tr>
      <tr>
        <td>Luka</td>
        <td>Modric</td>
        <td>luka@example.com</td>
      </tr>
    </tbody>
  </table>
</body>
</html>

The output of the above example will looks like that.

bootstrap 4 tables with hover rows example

#5: Bootstrap 4 Dark/Black Table

The .table-dark class adds a black background to the table.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 4 Tables Tutorial With Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<h2>Black/Dark Table</h2>
<table class="table table-dark">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Cristiano</td>
        <td>Ronaldo</td>
        <td>cristiano@example.com</td>
      </tr>
      <tr>
        <td>Leo</td>
        <td>Messi</td>
        <td>leo@example.com</td>
      </tr>
      <tr>
        <td>Luka</td>
        <td>Modric</td>
        <td>luka@example.com</td>
      </tr>
    </tbody>
  </table>
</body>
</html>

The output of the above example will looks like below screenshot.

bootstrap 4 dark table example

#6: Bootstrap 4 Dark Stripe Table

Combine .table-dark and .table-striped to create a dark striped table.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 4 Tables Tutorial With Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<h2>Dark Striped Table</h2>
<table class="table table-dark table-striped">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Cristiano</td>
        <td>Ronaldo</td>
        <td>cristiano@example.com</td>
      </tr>
      <tr>
        <td>Leo</td>
        <td>Messi</td>
        <td>leo@example.com</td>
      </tr>
      <tr>
        <td>Luka</td>
        <td>Modric</td>
        <td>luka@example.com</td>
      </tr>
    </tbody>
  </table>
</body>
</html>

The output of the above example will look like below screenshot.

bootstrap 4 dark stripe table example

 

#7: Bootstrap 4 Hoverable Dark Table

The .table-hover class adds a hover effect (grey background color) on table rows.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 4 Tables Tutorial With Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<h2>Hoverable Dark Table</h2>
<table class="table table-dark table-hover">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Cristiano</td>
        <td>Ronaldo</td>
        <td>cristiano@example.com</td>
      </tr>
      <tr>
        <td>Leo</td>
        <td>Messi</td>
        <td>leo@example.com</td>
      </tr>
      <tr>
        <td>Luka</td>
        <td>Modric</td>
        <td>luka@example.com</td>
      </tr>
    </tbody>
  </table>
</body>
</html>

The output of the above example will looks like below screenshot.

bootstrap 4 hoverable dark table example

#8: Contextual Classes

Contextual classes can be used to color the whole table (<table>),  the table rows (<tr>) or table cells (<td>). The 9 contextual classes are classes are: .table-primary, .table-success, .table-info, .table-warning, .table-danger, .table-active, .table-secondary, .table-light and .table-dark

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 4 Tables Tutorial With Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<h2>Contextual Classes</h2>
<table class="table table-borderless">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Cristiano</td>
        <td>Ronaldo</td>
        <td>cristiano@example.com</td>
      </tr>
      <tr class="table-primary">
        <td>Leo</td>
        <td>Messi</td>
        <td>leo@example.com</td>
      </tr>
      <tr class="table-success">
        <td>Luka</td>
        <td>Modric</td>
        <td>luka@example.com</td>
      </tr>
      <tr class="table-danger">
        <td>Robert</td>
        <td>Lewondoski</td>
        <td>robert@example.com</td>
      </tr>
      <tr class="table-info">
        <td>Eden</td>
        <td>Hezard</td>
        <td>eden@example.com</td>
      </tr>
      <tr class="table-warning">
        <td>Mario</td>
        <td>Gomez</td>
        <td>mario@example.com</td>
      </tr>
      <tr class="table-active">
        <td>Sergio</td>
        <td>Ramos</td>
        <td>sergio@example.com</td>
      </tr>
      <tr class="table-secondary">
        <td>Richardo</td>
        <td>Kaka</td>
        <td>sergio@example.com</td>
      </tr>
      <tr class="table-light">
        <td>Harry</td>
        <td>Kane</td>
        <td>harry@example.com</td>
      </tr>
      <tr class="table-dark text-dark">
        <td>Rento</td>
        <td>Sanchez</td>
        <td>rento@example.com</td>
      </tr>
    </tbody>
  </table>
  </div>
</body>
</html>

The output of the above example will looks like below screenshot.

bootstrap 4 contexual classes example

At last, our Bootstrap 4 Tables Tutorial With Example is over.

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.