Articles → BOOTSTRAP → Table bootstrap classes

Table bootstrap classes






Table class




<!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




<table class="table table-striped">


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

Click to Enlarge


table-bordered class




<table class="table table-bordered">


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

Click to Enlarge


table-hover class




<table class="table table-hover">


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

Click to Enlarge


Contextual classes




<!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>




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/FeedbackCharacters remaining 250