i2tutorials

Bootstrap Tables

Bootstrap Tables

 

Bootstrap tables allow you to arrange data into rows and columns.

You can create a table using the <table> element.Inside the <table> element you can use the <tr> elements to create row, <td> elemets to create columns, <th> elemets to create heading.

 

Basic Example:

 

<div class="container">          
  <table class="table">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
     <tr>
        <td>name1</td>
        <td>name</td>
        <td>name@gmail.com</td>
      </tr>
      <tr>
        <td>name2</td>
        <td>name</td>
        <td>name2@gmail.com</td>
     </tr>
     <tr>
         <td>name3</td>
        <td>name</td>
       <td>name3@gmail.com</td>
      </tr>
    </tbody>
  </table>
</div>

 

OUTPUT

 

bootstrap tables

 

Striped Table Rows:

 

Adding  .table-striped class to <table> element, you  can create a table with alternative  background colored rows.

 

Example:

 

<div class="container">
 <table class="table table-striped">
  <thead>
   <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Email</th>
   </tr>
  </thead>
  <tbody>
   <tr>
    <td>name1</td>
    <td>name</td>
    <td>name1@gmail.com</td>
   </tr>
   <tr>
    <td>name2</td>
    <td>name</td>
    <td>name2@gmail.com</td>
   </tr>
   <tr>
    <td>name3</td>
    <td>name</td>
    <td>name3@gmail.com</td>
   </tr>
  </tbody>
 </table>
</div>

 

OUTPUT

 

Bordered Table :

 

Adding  .table-bordered class to <table> element, you  can create a border on all sides of the table and cells.

 

Example:

 

<div class="container">
 <table class="table table-bordered">
  <thead>
   <tr>
    <th>Firstname</th>
    <th>Lastname</th><th>Email</th>
    </tr>
   </thead>
   <tbody>
    <tr>
     <td>name1</td>
     <td>name</td>
    <td>name1@gmail.com</td>
   </tr>
   <tr>
    <td>name2</td>
    <td>name</td>
    <td>name2@gmail.com</td>
   </tr>
   <tr>
    <td>name3</td>
    <td>name</td>
    <td>name3@gmail.com</td>
   </tr>
  </tbody>
 </table>
</div>

 

OUTPUT

 

Hover Rows Table :

 

Adding the .table-hover class is used to add a hover effect on table rows.

 

Example:

 

<div class="container">
 <table class="table table-hover">
  <thead>
   <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Email</th>
   </tr>
  </thead>
  <tbody>
   <tr>
    <td>name1</td>
    <td>name</td>
    <td>name1@gmail.com</td>
   </tr>
   <tr>
    <td>name2</td>
    <td>name</td>
    <td>name2@gmail.com</td>
   </tr>
   <tr>
    <td>name3</td>
    <td>name</td>
    <td>name3@gmail.com</td>
   </tr>
  </tbody>
 </table>
</div>

 

OUTPUT

 

 

Black/Dark Table:

 

Adding  .table-dark class to <table> element, you  can adds a black background to the table.

 

Example:

 

<div class="container">
 <table class="table table-dark">
  <thead>
   <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Email</th>
   </tr>
  </thead>
  <tbody>
   <tr>
    <td>name1</td>
    <td>name</td>
    <td>name1@gmail.com</td>
   </tr>
   <tr>
    <td>name2</td>
    <td>name</td>
    <td>name2@gmail.com</td>
   </tr>
   <tr>
    <td>name3</td>
    <td>name</td>
    <td>name3@gmail.com</td>
   </tr>
  </tbody>
 </table>
</div>

 

OUTPUT

 

 

Dark Striped Table:

 

The combination of  .table-dark and .table-striped to create a dark, striped table.

 

Example:

 

<div class="container">
 <table class="table table-dark table-striped">
  <thead>
   <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Email</th>
   </tr>
  </thead>
  <tbody>
   <tr>
    <td>name</td>
    <td>name</td>
    <td>name@gmail.com</td>
   </tr>
   <tr>
    <td>name</td>
    <td>name</td>
    <td>name@gmail.com</td>
   </tr>
   <tr>
    <td>name</td>
    <td>name</td>
    <td>name@gmail.com</td>
   </tr>
  </tbody>
 </table>
</div>

 

OUTPUT

 

 

Hoverable Dark Table:

 

The combination of  .table-dark and .table-hover classes is used to add a hover effect (grey background color)on the table.

 

Example:

 

<div class="container">
 <table class="table table-dark table-hover">
  <thead>
   <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Email</th>
   </tr>
  </thead>
  <tbody>
   <tr>
    <td>name1</td>
    <td>name</td>
    <td>name1@gmail.com</td>
   </tr>
   <tr>
    <td>name2</td>
    <td>name</td>
    <td>name2@gmail.com</td>
   </tr>
   <tr>
    <td>name3</td>
    <td>name</td>
    <td>name3@gmail.com</td>
   </tr>
  </tbody>
 </table>
</div>

 

OUTPUT

 

 

Borderless Table:

 

The .table-borderless is used to remove the border from table rows and columns.

 

Example:

 

<div class="container">
 <table class="table table-borderless">
  <thead>
   <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Email</th>
   </tr>
  </thead>
  <tbody>
   <tr>
    <td>name1</td>
    <td>name</td>
    <td>name1@gmail.com</td>
   </tr>
   <tr>
    <td>name2</td>
    <td>name</td>
    <td>name2@gmail.com</td>
   </tr>
   <tr>
    <td>name3</td>
    <td>name</td>
    <td>name3@gmail.com</td>
   </tr>
  </tbody>
 </table>
</div>

 

OUTPUT

 

 

Contextual Classes:

 

Contextual classes can be used to color the whole table (<table>), an entire row (<tr>), or a single cell (<td>),  of a table.

The list of contextual classes is: .table-primary, .table-success, .table-info, .table-warning, .table-danger, .table-active, .table-secondary, .table-light and .table-dark:

 

Example:

 

<div class="container">
 <table class="table">
  <thead>
   <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Email</th>
   </tr>
  </thead>
  <tbody>
   <tr>
    <td>Default</td>
    <td>Defaultson</td>
    <td>Default@gmail.com</td>
   </tr>
   <tr class="table-primary">
    <td>Primary</td>
    <td>Joe</td>
    <td>Primary@gmail.com</td>
   </tr>
   <tr class="table-success">
    <td>Success</td>
    <td>Doe</td>
    <td>Success@gmail.com</td>
   </tr>
   <tr class="table-danger">
    <td>Danger</td>
    <td>Moe</td>
    <td>Danger@gmail.com</td>
   </tr>
   <tr class="table-info">
    <td>Info</td>
    <td>Dooley</td>
    <td>Info@gmail.com</td>
   </tr>
   <tr class="table-warning">
    <td>Warning</td>
    <td>Refs</td>
    <td>Warning@gmail.com</td>
   </tr>
   <tr class="table-active">
    <td>Active</td>
    <td>Activeson</td>
    <td>Active@gmail.com</td>
   </tr>
  </tbody>
 </table>
</div>

 

OUTPUT

 

 

Responsive Tables:

 

The .table-responsive class is added to create a responsive table, scrollbar to the table when needed ( too big horizontally).

 

Example:

 

<div class="container">
<div class="table-responsive">
 <table class="table table-bordered">
  <thead>
   <tr>
    <th>#</th>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
    <th>City</th>
    <th>Country</th>
    <th>Sex</th>
    <th>Example</th>
    <th>Example</th>
    <th>Example</th>
    <th>Example</th>
    <th>Example</th>
   </tr>
  </thead>
  <tbody>
   <tr>
    <td>1</td>
    <td>name1</td>
    <td>name2</td>
    <td>37</td>
    <td>New York</td>
    <td>India</td>
    <td>Female</td>
    <td>Yes</td>
    <td>Yes</td>
    <td>Yes</td>
    <td>Yes</td>
    <td>Yes</td>
   </tr>
  </tbody>
 </table>
</div>
</div>

 

OUTPUT

 

Exit mobile version