Bootstrap 4 Tables

Bootstrap 4 Tables

Learn how to use Bootstrap 4 Tables Classes

Basics Table

Tables are one the most used Feature of Bootstrap, it finds application to create tables of multiple types and also third party widgets like calendar and date pickers. To create a basic tabel with bootstrap 4 table class, just  use .table  class

<table class='table'>

<thead>
    <tr>
      <th>Sr No</th>
      <th>name</th>
      <th>Roll</th>
      <th>Class</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Abdur Rahaman</td>
      <td>20</td>
      <td>XII</td>
    </tr>
  </tbody>

</table>

Boostrap 4 Inverse Table Class

A Dark background table can be created using class .table-inverse

<table class='table table-inverse'>

<thead>
    <tr>
      <th>Sr No</th>
      <th>name</th>
      <th>Roll</th>
      <th>Class</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Abdur Rahaman</td>
      <td>20</td>
      <td>XII</td>
    </tr>
  </tbody>

</table>

 

Bootstrap 4 Table Head Options

The Table class .table-inverse and .table-default can be used within <thead> to make the table header appear light or dark.

<table class='table'>

<thead class="thead-inverse"><!-- OR thead-default for White background-->
    <tr>
      <th>Sr No</th>
      <th>name</th>
      <th>Roll</th>
      <th>Class</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Abdur Rahaman</td>
      <td>20</td>
      <td>XII</td>
    </tr>
  </tbody>

</table>

 

Bootstrap 4 Striped Table

A stripped Table is created using class .table-striped . It will make a zebra pattern table.

 

<table class='table table-striped'>

<thead>
    <tr>
      <th>Sr No</th>
      <th>name</th>
      <th>Roll</th>
      <th>Class</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Abdur Rahaman</td>
      <td>20</td>
      <td>XII</td>
    </tr>
  </tbody>

</table>

 

Bootstrap 4 Border Table

To make a Bordered Table just Declare table-bordered class. It will make a bordered Table

<table class='table table-bordered'>

<thead>
    <tr>
      <th>Sr No</th>
      <th>name</th>
      <th>Roll</th>
      <th>Class</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Abdur Rahaman</td>
      <td>20</td>
      <td>XII</td>
    </tr>
  </tbody>

</table>

Bootsrap 4 Hover Table

To make hover effect in table's Rows and Colums just Declare .table-hover   class in table 

<table class='table table-striped'>

<thead>
    <tr>
      <th>Sr No</th>
      <th>name</th>
      <th>Roll</th>
      <th>Class</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Abdur Rahaman</td>
      <td>20</td>
      <td>XII</td>
    </tr>
  </tbody>

</table>

Bootstrap 4 Responsvie Table

To make a responsive table just declare .table-responsive class in table. It Will Make a Responsive Table

<table class='table table-responsive'>

<thead>
    <tr>
      <th>Sr No</th>
      <th>name</th>
      <th>Roll</th>
      <th>Class</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Abdur Rahaman</td>
      <td>20</td>
      <td>XII</td>
    </tr>
  </tbody>
</table>

 

Bootstrap 4 Context Table

table-active Applies the hover background color to the applied row or cell.

.table-success To Denote a successful or positive action.

.table-info To Denote a neutal or informative content.

.table-warning To Denote a warning requiring attention.

.table-danger To Denote a dangerours or harmful action.

<table class="table">
  <thead>
    
  </thead>
  <tbody>
    <tr class="table-active">  <!-- .table-active -->
      <th scope="row">1</th>
      <td>USA</td>
      <td>Washington DC</td>
      <td>Dollar</td>
    </tr>
    <tr class="table-success">  <!-- .table-success -->
      
    </tr>
    <tr class="table-warning">  <!-- .table-warning -->
     
    </tr>
	<tr class="table-danger">  <!-- .table-danger -->
     
    </tr>
	<tr class="table-info">    <!-- .table-info -->
     
    </tr>
  </tbody>
</table>

 

 

Bootstrap 4  Rowflow Table

A Reflow Table is created using class .table-reflow within the element

<table class='table table-reflow'>

<thead>
    <tr>
      <th>Sr No</th>
      <th>name</th>
      <th>Roll</th>
      <th>Class</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Abdur Rahaman</td>
      <td>20</td>
      <td>XII</td>
    </tr>
  </tbody>
</table>

 

 

 

Bootstrap 4 Border Table

To make a Bordered Table just Declare table-bordered class. It will make a bordered Table

<table class='table table-hover'>

<thead>
    <tr>
      <th>Sr No</th>
      <th>name</th>
      <th>Roll</th>
      <th>Class</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Abdur Rahaman</td>
      <td>20</td>
      <td>XII</td>
    </tr>
  </tbody>
</table>
Thank You for visit Webriceter.com Design & Develop by Abdur Rahaman