Introduction

In this write-up, we will learn about Bootstrap 4 Tables classes. Bootstrap is an open source framework to create responsive web applications. Bootstrap 4 has brought some major updates. In this blog, we will discuss the newly added table classes.

In this blog, we will cover the following classes.

  • Dark Table
  • Table Head Styles
  • Contextual Classes
  • Condensed Tables

Dark Table class

This class adds a dark background to an HTML table.

Open Visual Studio and create a new project. Rename it as Bootstrap4 Table and add the reference of the Bootstrap 4 files into the page's head section.

Add a table and add .dark-table class.

  1. <table class="table table-dark"> </table>
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8" />
  5. <title>Bootstarp 4</title>
  6. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
  7. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  8. <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
  9. <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
  10. </head>
  11. <body>
  12. <div class="container">
  13. <h4 class="text-center">Bootstrap 4 Dark Table</h4>
  14. <table class="table table-dark">
  15. <thead>
  16. <tr>
  17. <th>Name</th>
  18. <th>Gender</th>
  19. <th>City</th>
  20. <th>Country</th>
  21. </tr>
  22. </thead>
  23. <tbody>
  24. <tr>
  25. <td>Sam</td>
  26. <td>Male</td>
  27. <td>Jaipur</td>
  28. <td>India</td>
  29. </tr>
  30. <tr>
  31. <td>Sam</td>
  32. <td>Male</td>
  33. <td>Jaipur</td>
  34. <td>India</td>
  35. </tr>
  36. <tr>
  37. <td>Sam</td>
  38. <td>Male</td>
  39. <td>Jaipur</td>
  40. <td>India</td>
  41. </tr>
  42. <tr>
  43. <td>Sam</td>
  44. <td>Male</td>
  45. <td>Jaipur</td>
  46. <td>India</td>
  47. </tr>
  48. </tbody>
  49. </table>
  50. </div>
  51. </body>
  52. </html>

Run the project and check the result.

Bootstrap 4 Table Classes

Table Head Styles

These classes add style to the HTML Table header
  • .thead-dark
  • .thead-light

Add a table and add these header classes in the head section of the table.

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8" />
  5. <title>Bootstarp 4</title>
  6. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
  7. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  8. <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
  9. <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
  10. </head>
  11. <body>
  12. <div class="container">
  13. <h4 class="text-center">Bootstrap 4 Table Head</h4>
  14. <table class="table">
  15. <thead class="thead-light">
  16. <tr>
  17. <th>Name</th>
  18. <th>Gender</th>
  19. <th>City</th>
  20. <th>Country</th>
  21. </tr>
  22. </thead>
  23. <tbody>
  24. <tr>
  25. <td>Sam</td>
  26. <td>Male</td>
  27. <td>Jaipur</td>
  28. <td>India</td>
  29. </tr>
  30. <tr>
  31. <td>Zack</td>
  32. <td>Male</td>
  33. <td>Delhi</td>
  34. <td>India</td>
  35. </tr>
  36. <tr>
  37. <td>Nisha</td>
  38. <td>Female</td>
  39. <td>Jaipur</td>
  40. <td>India</td>
  41. </tr>
  42. <tr>
  43. <td>Suresh</td>
  44. <td>Male</td>
  45. <td>Jaipur</td>
  46. <td>India</td>
  47. </tr>
  48. </tbody>
  49. </table>
  50. </div>
  51. </body>
  52. </html>

Run the project and check the result.

Bootstrap 4 Table Classes
Bootstrap 4 Table Classes

Contextual Classes

These classes add color to a table or a table row or table cells.
Following is the list of contextual classes.

  • .table-dark
  • table-primary
  • .table-secondary
  • .table-success
  • .table-danger
  • .table-info
  • .table-warning
  • .table-active
  • .table-light

Now, add some divs and add these classes.

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>Bootstrap 4</title>
  5. <meta charset="utf-8" />
  6. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
  7. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  8. <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
  9. <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
  10. </head>
  11. <body>
  12. <div class="container">
  13. <h4 class="text-center">Bootstrap 4 Contextual Class</h4>
  14. <table class="table">
  15. <thead class="thead-light">
  16. <tr>
  17. <th>Name</th>
  18. <th>Gender</th>
  19. <th>City</th>
  20. <th>Country</th>
  21. </tr>
  22. </thead>
  23. <tbody>
  24. <tr class="table-dark">
  25. <td>Sam</td>
  26. <td>Male</td>
  27. <td>Jaipur</td>
  28. <td>India</td>
  29. </tr>
  30. <tr class="table-primary">
  31. <td>Sam</td>
  32. <td>Male</td>
  33. <td>Jaipur</td>
  34. <td>India</td>
  35. </tr>
  36. <tr class="table-secondary">
  37. <td>Zack</td>
  38. <td>Male</td>
  39. <td>Delhi</td>
  40. <td>India</td>
  41. </tr>
  42. <tr class="table-success">
  43. <td>Nisha</td>
  44. <td>Female</td>
  45. <td>Jaipur</td>
  46. <td>India</td>
  47. </tr>
  48. <tr class="table-danger">
  49. <td>Suresh</td>
  50. <td>Male</td>
  51. <td>Jaipur</td>
  52. <td>India</td>
  53. </tr>
  54. <tr class="table-info">
  55. <td>Aman</td>
  56. <td>Male</td>
  57. <td>Jaipur</td>
  58. <td>India</td>
  59. </tr>
  60. <tr class="table-warning">
  61. <td>Sunita</td>
  62. <td>Male</td>
  63. <td>Jaipur</td>
  64. <td>India</td>
  65. </tr>
  66. </tbody>
  67. </table>
  70. </div>
  71. </body>
  72. </html>

Run the project and check the result.

Bootstrap 4 Table Classes

Summary

In this blog, we learned some important Bootstrap Table classes. I hope this will help you while designing a bootstrap-based application.