Bootstrap 4 Basic Table:
Bootstrap 4 Table:
Bootstrap 4 Basic Table:
Bootstrap 4 Table .table class adds basic styling to the table.
Example:
- <!doctype html>
- <html lang="en">
- <head>
- <!-- here Required meta tags -->
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
- <!-- here Bootstrap CSS -->
- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
- <title>Bootstrap 4 Basic Table !</title>
- </head>
- <body>
- <div class="container">
- <table class="table">
- <thead>
- <tr>
- <th>This is Name</th>
- <th>This is Gender</th>
- <th>This is Email</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td>Jon</td>
- <td>Male</td>
- <td>Jon@gmail.com</td>
- </tr>
- <tr>
- <td>Mical</td>
- <td>Male</td>
- <td>Mical@gmail.com</td>
- </tr>
- <tr>
- <td>Dipa</td>
- <td>Female</td>
- <td>Dipa@gmail.com</td>
- </tr>
- </tbody>
- </table>
- </div>
- <!-- here Optional JavaScript -->
- <!-- here jQuery first, then Popper.js, then Bootstrap JS -->
- <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>
Output:
Bootstrap 4 Striped Rows:
Bootstrap 4 Table .table-striped class adds Zebra-stripes styling to table.
Example:
- <!doctype html>
- <html lang="en">
- <head>
- <!-- here Required meta tags -->
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
- <!-- here Bootstrap CSS -->
- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
- <title>Bootstrap 4 Basic Table !</title>
- </head>
- <body>
- <div class="container">
- <table class="table table-striped">
- <thead>
- <tr>
- <th>This is Name</th>
- <th>This is Gender</th>
- <th>This is Email</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td>Jon</td>
- <td>Male</td>
- <td>Jon@gmail.com</td>
- </tr>
- <tr>
- <td>Mical</td>
- <td>Male</td>
- <td>Mical@gmail.com</td>
- </tr>
- <tr>
- <td>Dipa</td>
- <td>Female</td>
- <td>Dipa@gmail.com</td>
- </tr>
- </tbody>
- </table>
- </div>
- <!-- here Optional JavaScript -->
- <!-- here jQuery first, then Popper.js, then Bootstrap JS -->
- <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>
Output:
Bootstrap 4 Border Table:
Bootstrap 4 Table .table-bordered class adds Border Table styling to table.
Example:
- <!doctype html>
- <html lang="en">
- <head>
- <!-- here Required meta tags -->
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
- <!-- here Bootstrap CSS -->
- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
- <title>Bootstrap 4 Basic Table !</title>
- </head>
- <body>
- <div class="container">
- <table class="table table-bordered">
- <thead>
- <tr>
- <th>This is Name</th>
- <th>This is Gender</th>
- <th>This is Email</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td>Jon</td>
- <td>Male</td>
- <td>Jon@gmail.com</td>
- </tr>
- <tr>
- <td>Mical</td>
- <td>Male</td>
- <td>Mical@gmail.com</td>
- </tr>
- <tr>
- <td>Dipa</td>
- <td>Female</td>
- <td>Dipa@gmail.com</td>
- </tr>
- </tbody>
- </table>
- </div>
- <!-- here Optional JavaScript -->
- <!-- here jQuery first, then Popper.js, then Bootstrap JS -->
- <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>
Output:
Bootstrap 4 Hover Rows:
Bootstrap 4 Table .table-hover class adds Hover Rows styling to table.
Example:
- <!doctype html>
- <html lang="en">
- <head>
- <!-- here Required meta tags -->
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
- <!-- here Bootstrap CSS -->
- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
- <title>Bootstrap 4 Basic Table !</title>
- </head>
- <body>
- <div class="container">
- <table class="table table-hover">
- <thead>
- <tr>
- <th>This is Name</th>
- <th>This is Gender</th>
- <th>This is Email</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td>Jon</td>
- <td>Male</td>
- <td>Jon@gmail.com</td>
- </tr>
- <tr>
- <td>Mical</td>
- <td>Male</td>
- <td>Mical@gmail.com</td>
- </tr>
- <tr>
- <td>Dipa</td>
- <td>Female</td>
- <td>Dipa@gmail.com</td>
- </tr>
- </tbody>
- </table>
- </div>
- <!-- here Optional JavaScript -->
- <!-- here jQuery first, then Popper.js, then Bootstrap JS -->
- <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>
Output:

Bootstrap 4 Black OR Drak Table:
Bootstrap 4 Table .table-dark class adds Black OR Drak Table styling to table.
Example:
- <!doctype html>
- <html lang="en">
- <head>
- <!-- here Required meta tags -->
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
- <!-- here Bootstrap CSS -->
- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
- <title>Bootstrap 4 Basic Table !</title>
- </head>
- <body>
- <div class="container">
- <table class="table table-dark">
- <thead>
- <tr>
- <th>This is Name</th>
- <th>This is Gender</th>
- <th>This is Email</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td>Jon</td>
- <td>Male</td>
- <td>Jon@gmail.com</td>
- </tr>
- <tr>
- <td>Mical</td>
- <td>Male</td>
- <td>Mical@gmail.com</td>
- </tr>
- <tr>
- <td>Dipa</td>
- <td>Female</td>
- <td>Dipa@gmail.com</td>
- </tr>
- </tbody>
- </table>
- </div>
- <!-- here Optional JavaScript -->
- <!-- here jQuery first, then Popper.js, then Bootstrap JS -->
- <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>
Output:
Bootstrap 4 Contextual Classes Table:
Contextual Classes can be used to color style the whole table <table>, table rows <tr>, table data <td>.
Example:
- <!doctype html>
- <html lang="en">
- <head>
- <!-- here Required meta tags -->
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
- <!-- here Bootstrap CSS -->
- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
- <title>Bootstrap 4 Basic Table !</title>
- </head>
- <body>
- <div class="container">
- <table class="table table-bordered">
- <thead>
- <tr class="table-danger" >
- <th>This is Name</th>
- <th>This is Gender</th>
- <th>This is Email</th>
- </tr>
- </thead>
- <tbody>
- <tr class="table-success">
- <td>Jon</td>
- <td>Male</td>
- <td>Jon@gmail.com</td>
- </tr>
- <tr class="table-info">
- <td>Dipa</td>
- <td>Female</td>
- <td>Dipa@gmail.com</td>
- </tr>
- <tr class="table-warning">
- <td>Sopon</td>
- <td>Male</td>
- <td>Sopon@gmail.com</td>
- </tr>
- <tr class="table-active">
- <td>Mahi</td>
- <td>Female</td>
- <td>Mahi@gmail.com</td>
- </tr>
- <tr class="table-secondary">
- <td>Nusrat</td>
- <td>Female</td>
- <td>Nusrat@gmail.com</td>
- </tr>
- <tr class="table-light">
- <td>Hasib</td>
- <td>Male</td>
- <td>Hasib@gmail.com</td>
- </tr>
- <tr class="table-dark">
- <td>Mamun</td>
- <td>Male</td>
- <td>Mamun@gmail.com</td>
- </tr>
- </tbody>
- </table>
- </div>
- <!-- here Optional JavaScript -->
- <!-- here jQuery first, then Popper.js, then Bootstrap JS -->
- <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>
Output:

Bootstrap 4 Contextual Classes can be used............
table-dark |
Table Background Dark or Black |
table-light |
Table Background Light |
table-secondary |
Table Background slightly Grey |
table-active |
Table Background Grey hover color |
table-warning |
Table Background Orange |
table-info |
Table Background Light blue |
table-success |
Table Background Green |
table-danger |
Table Background Red |
table-primary |
Table Background Blue |
Responsive Table:
If larger than the display, the scrollbar will show...
Bootstrap 4 Responsive Table, Bootstrap Responsive Table,
Example:
- <!doctype html>
- <html lang="en">
- <head>
- <!-- here Required meta tags -->
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
- <!-- here Bootstrap CSS -->
- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
- <title>Bootstrap 4 Basic Table !</title>
- </head>
- <body>
- <div class="container">
- <div class="table-responsive">
- <table class="table table-bordered">
- <thead>
- <tr>
- <th>Example</th>
- <th>Example</th>
- <th>Example</th>
- <th>Example</th>
- <th>Example</th>
- <th>Example</th>
- <th>Example</th>
- <th>Example</th>
- <th>Example</th>
- <th>Example</th>
- <th>Example</th>
- <th>Example</th>
- <th>Example</th>
- <th>Example</th>
- <th>Example</th>
- <th>Example</th>
- <th>Example</th>
- <th>Example</th>
- <th>Example</th>
- <th>Example</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td>Test</td>
- <td>Test</td>
- <td>Test</td>
- <td>Test</td>
- <td>Test</td>
- <td>Test</td>
- <td>Test</td>
- <td>Test</td>
- <td>Test</td>
- <td>Test</td>
- <td>Test</td>
- <td>Test</td>
- <td>Test</td>
- <td>Test</td>
- <td>Test</td>
- <td>Test</td>
- <td>Test</td>
- <td>Test</td>
- <td>Test</td>
- <td>Test</td>
- </tr>
- </tbody>
- </table>
- </div>
- </div>
- <!-- here Optional JavaScript -->
- <!-- here jQuery first, then Popper.js, then Bootstrap JS -->
- <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>
Output:
You may also use following built-in Bootstrap classes for displaying scrollbar till a specific breakpoint.
Use .table-responsive-sm, .table-responsive-md, .table-responsive-lg, .table-responsive-xl as needed to create responsive tables up to a particular breakpoint.
Class |
Screen Width |
---|---|
.table-responsive-sm |
< 576 px |
.table-responsive-md |
< 768 px |
.table-responsive-lg |
< 992 px |
.table-responsive-xl |
< 1200 px |
Example:
- <!doctype html>
- <html lang="en">
- <head>
- <!-- here Required meta tags -->
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
- <!-- here Bootstrap CSS -->
- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
- <title>Bootstrap 4 Basic Table !</title>
- </head>
- <body>
- <div class="container">
- <div class="table-responsive-sm">
- <table class="table">
- <thead>
- ......................
- ......................
- </thead>
- <tbody>
- ......................
- ......................
- </tbody>
- </table>
- </div>
- </div>
- <div class="container">
- <div class="table-responsive-md">
- <table class="table">
- <thead>
- ......................
- ......................
- </thead>
- <tbody>
- ......................
- ......................
- </tbody>
- </table>
- </div>
- </div>
- <div class="container">
- <div class="table-responsive-lg">
- <table class="table">
- <thead>
- ......................
- ......................
- </thead>
- <tbody>
- ......................
- ......................
- </tbody>
- </table>
- </div>
- </div>
- <div class="container">
- <div class="table-responsive-xl">
- <table class="table">
- <thead>
- ......................
- ......................
- </thead>
- <tbody>
- ......................
- ......................
- </tbody>
- </table>
- </div>
- </div>
- <!-- here Optional JavaScript -->
- <!-- here jQuery first, then Popper.js, then Bootstrap JS -->
- <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>
Bootstrap 4 Table, Bootstrap Table, responsive table, Bootstrap responsive table, Bootstrap 4 table responsive table. table class
Thank You............
shelleyakter
So nice post, Thank You.