Articles → BOOTSTRAP → Table Bootstrap Classes

Table Bootstrap Classes

In this article, we will discuss the table bootstrap classes.

Table Class

This class adds the basic styling to the table.

<!DOCTYPE html>
<html>
   <head>
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="bootstrap.css" />
   </head>
   <body style="margin:20px">
      <form>
         <table class="table">
            <thead>
               <tr>
                  <td>
                     Label
                  </td>
                  <td>
                     Fields
                  </td>
               </tr>
            </thead>
            <tr>
               <td>
                  User Name
               </td>
               <td>
                  <input type="text" />
               </td>
            </tr>
            <tr>
               <td>
                  Password
               </td>
               <td>
                  <input type="text" />
               </td>
            </tr>
            <tr>
               <td>
                  Address
               </td>
               <td>
                  <input type="text" />
               </td>
            </tr>
         </table>
      </form>
   </body>
</html>

Picture showing the output of the table class in bootstrap

Click to Enlarge

Table-Striped Class

This class adds zebra stripes to the table. In the above code, add the "table-striped" class.

<table class="table table-striped">

Picture showing the output of the table-striped class in bootstrap

Click to Enlarge

Table-Bordered Class

This class adds the border around the table and cells.

<table class="table table-bordered">

Picture showing the output of the table-bordered class in bootstrap

Click to Enlarge

Table-Hover Class

This class highlights the row with gray color when the mouse pointer is hovered over the row.

<table class="table table-hover">

Picture showing the output of the table-hover class in bootstrap

Click to Enlarge

Contextual Classes

Contextual classes are used to color table rows. Here is an example.

<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Bootstrap Example</title>
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
   </head>
   <body>
      <div class="container">
         <table class="table">
            <tr>
               <th>Header</th>
            </tr>
            <tr class="success">
               <td>Success class</td>
            </tr>
            <tr class="danger">
               <td>Danger class</td>
            </tr>
            <tr class="info">
               <td>Info  class</td>
            </tr>
            <tr class="warning">
               <td>Warning class</td>
            </tr>
            <tr class="active">
               <td>Active class</td>
            </tr>
         </table>
      </div>
   </body>
</html>

Here is the output

Picture showing the output of the contextual class in bootstrap

Click to Enlarge

Posted By -	Karan Gupta

Posted On -	Friday, September 3, 2021

Query/Feedback

Your Email Id		**

Subject		*

Query/Feedback	Characters remaining 250	**