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-bordered
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>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.

Krunal Lathiya is an Information Technology Engineer by education and web developer by profession. He has worked with many back-end platforms, including Node.js, PHP, and Python. In addition, Krunal has excellent knowledge of cloud technologies including Google Cloud, Firebase, AWS, and Azure, and various softwares and tools.