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:
#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.
#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.
#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.
#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.
#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.
#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.
#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.
At last, our Bootstrap 4 Tables Tutorial With Example is over.
Post Your Thoughts