Post
Ask Question

Bootstrap 4 Table Classes

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>  
  68.   
  69.   
  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.