Bootstrap 4
Bootstrap 4 Tables
Use bootstrap 4 to create beautiful tables. Bootstrap 4 version has some new classes for inverting the table color and making the table responsive.
Basic Table

A Bootstrap 4 basic table with lightly padded cells and horizontal dividers. Bootstrap table uses all HTML table tags with the header inside <thead> and the body of the table inside <tbody> tags.

<table class="table">
  <thead>
	<tr>
	  <th scope="col">S.No</th>
	  <th scope="col">Name</th>
	  <th scope="col">Email Id</th>
	  <th scope="col">Mobile</th>
	</tr>
  </thead>
  <tbody>
	<tr>
	  <th scope="row">1</th>
	  <td>Free Time Learn</td>
	  <td>freetimelearn@gmail.com</td>
	  <td>9010023210</td>
	</tr>
	<tr>
	  <th scope="row">2</th>
	  <td>Free Time Learning</td>
	  <td>info@freetimelearning.com</td>
	  <td>9966463846</td>
	</tr>
	<tr>
	  <th scope="row">3</th>
	  <td>Ramana</td>
	  <td>ramana@freetimelearning.com</td>
	  <td>9963666068</td>
	</tr>
  </tbody>
</table>
Output :
Table Dark

The .table-dark class adds a black background and white color fonts to the table

<table class="table table-dark">
  <thead>
	<tr>
	  <th scope="col">S.No</th>
	  <th scope="col">Name</th>
	  <th scope="col">Email Id</th>
	  <th scope="col">Mobile</th>
	</tr>
  </thead>
  <tbody>
	<tr>
	  <th scope="row">1</th>
	  <td>Free Time Learn</td>
	  <td>freetimelearn@gmail.com</td>
	  <td>9010023210</td>
	</tr>
	<tr>
	  <th scope="row">2</th>
	  <td>Free Time Learning</td>
	  <td>info@freetimelearning.com</td>
	  <td>9966463846</td>
	</tr>
	<tr>
	  <th scope="row">3</th>
	  <td>Ramana</td>
	  <td>ramana@freetimelearning.com</td>
	  <td>9963666068</td>
	</tr>
  </tbody>
</table>
Output :
Table head

You can add a background color to the <thead> element by using either .thead-light or .thead-dark.

<table class="table">
  <thead class="thead-light">
	<tr>
	  <th scope="col">S.No</th>
	  <th scope="col">Name</th>
	  <th scope="col">Email Id</th>
	  <th scope="col">Mobile</th>
	</tr>
  </thead>
  <tbody>
	<tr>
	  <th scope="row">1</th>
	  <td>Free Time Learn</td>
	  <td>freetimelearn@gmail.com</td>
	  <td>9010023210</td>
	</tr>
	<tr>
	  <th scope="row">2</th>
	  <td>Free Time Learning</td>
	  <td>info@freetimelearning.com</td>
	  <td>9966463846</td>
	</tr>
	<tr>
	  <th scope="row">3</th>
	  <td>Ramana</td>
	  <td>ramana@freetimelearning.com</td>
	  <td>9963666068</td>
	</tr>
  </tbody>
</table>

<hr />

<table class="table">
  <thead class="thead-dark">
	<tr>
	  <th scope="col">S.No</th>
	  <th scope="col">Name</th>
	  <th scope="col">Email Id</th>
	  <th scope="col">Mobile</th>
	</tr>
  </thead>
  <tbody>
	<tr>
	  <th scope="row">1</th>
	  <td>Free Time Learn</td>
	  <td>freetimelearn@gmail.com</td>
	  <td>9010023210</td>
	</tr>
	<tr>
	  <th scope="row">2</th>
	  <td>Free Time Learning</td>
	  <td>info@freetimelearning.com</td>
	  <td>9966463846</td>
	</tr>
	<tr>
	  <th scope="row">3</th>
	  <td>Ramana</td>
	  <td>ramana@freetimelearning.com</td>
	  <td>9963666068</td>
	</tr>
  </tbody>
</table>
Output :
Striped Table

Use .table-striped to add zebra-striping to any table row within the <tbody>.

<table class="table table-striped">
  <thead>
	<tr>
	  <th scope="col">S.No</th>
	  <th scope="col">Name</th>
	  <th scope="col">Email Id</th>
	  <th scope="col">Mobile</th>
	</tr>
  </thead>
  <tbody>
	<tr>
	  <th scope="row">1</th>
	  <td>Free Time Learn</td>
	  <td>freetimelearn@gmail.com</td>
	  <td>9010023210</td>
	</tr>
	<tr>
	  <th scope="row">2</th>
	  <td>Free Time Learning</td>
	  <td>info@freetimelearning.com</td>
	  <td>9966463846</td>
	</tr>
	<tr>
	  <th scope="row">3</th>
	  <td>Ramana</td>
	  <td>ramana@freetimelearning.com</td>
	  <td>9963666068</td>
	</tr>
  </tbody>
</table>

<hr />

<table class="table table-striped table-dark">
  <thead>
	<tr>
	  <th scope="col">S.No</th>
	  <th scope="col">Name</th>
	  <th scope="col">Email Id</th>
	  <th scope="col">Mobile</th>
	</tr>
  </thead>
  <tbody>
	<tr>
	  <th scope="row">1</th>
	  <td>Free Time Learn</td>
	  <td>freetimelearn@gmail.com</td>
	  <td>9010023210</td>
	</tr>
	<tr>
	  <th scope="row">2</th>
	  <td>Free Time Learning</td>
	  <td>info@freetimelearning.com</td>
	  <td>9966463846</td>
	</tr>
	<tr>
	  <th scope="row">3</th>
	  <td>Ramana</td>
	  <td>ramana@freetimelearning.com</td>
	  <td>9963666068</td>
	</tr>
  </tbody>
</table>
Output :
Bordered Table

The .table-bordered class adds borders on all sides of the table and cells.

<table class="table table-bordered">
  <thead>
	<tr>
	  <th scope="col">S.No</th>
	  <th scope="col">Name</th>
	  <th scope="col">Email Id</th>
	  <th scope="col">Mobile</th>
	</tr>
  </thead>
  <tbody>
	<tr>
	  <th scope="row">1</th>
	  <td>Free Time Learn</td>
	  <td>freetimelearn@gmail.com</td>
	  <td>9010023210</td>
	</tr>
	<tr>
	  <th scope="row">2</th>
	  <td>Free Time Learning</td>
	  <td>info@freetimelearning.com</td>
	  <td>9966463846</td>
	</tr>
	<tr>
	  <th scope="row">3</th>
	  <td>Ramana</td>
	  <td>ramana@freetimelearning.com</td>
	  <td>9963666068</td>
	</tr>
	<tr>
      <th scope="row">4</th>
      <td>Suresh</td>
      <td colspan="2">sureshreddy@freetimelearning.com</td>
    </tr>
  </tbody>
</table>
Output :
Hover Table Rows

The .table-hover class adds a hover effect (grey background color) on table rows.

<table class="table table-hover">
  <thead>
	<tr>
	  <th scope="col">S.No</th>
	  <th scope="col">Name</th>
	  <th scope="col">Email Id</th>
	  <th scope="col">Mobile</th>
	</tr>
  </thead>
  <tbody>
	<tr>
	  <th scope="row">1</th>
	  <td>Free Time Learn</td>
	  <td>freetimelearn@gmail.com</td>
	  <td>9010023210</td>
	</tr>
	<tr>
	  <th scope="row">2</th>
	  <td>Free Time Learning</td>
	  <td>info@freetimelearning.com</td>
	  <td>9966463846</td>
	</tr>
	<tr>
	  <th scope="row">3</th>
	  <td>Ramana</td>
	  <td>ramana@freetimelearning.com</td>
	  <td>9963666068</td>
	</tr>
	<tr>
      <th scope="row">4</th>
      <td>Suresh</td>
      <td colspan="2">sureshreddy@freetimelearning.com</td>
    </tr>
  </tbody>
</table>
Output :
Contextual Classes

Contextual classes can be used to color the whole table (<table>), the table rows (<tr>) or table cells (<td>).

<table class="table table-bordered">
  <thead>
	<tr>
	  <th scope="col">S.No</th>
	  <th scope="col">Name</th>
	  <th scope="col">Email Id</th>
	  <th scope="col">Mobile</th>
	</tr>
  </thead>
  <tbody>
	<tr class="table-active">
	  <td>1</td>
	  <td>Free Time Learn</td>
	  <td>freetimelearn@gmail.com</td>
	  <td>9010023210</td>
	</tr>
	<tr class="table-primary">
	  <td>2</td>
	  <td>Free Time Learning</td>
	  <td>info@freetimelearning.com</td>
	  <td>9966463846</td>
	</tr>
	<tr class="table-success">
	  <td>3</td>
	  <td>Ramana</td>
	  <td>ramana@freetimelearning.com</td>
	  <td>9963666068</td>
	</tr>
	<tr class="table-light">
      <td>4</td>
      <td>Suresh</td>
      <td>sureshreddy@freetimelearning.com</td>
	  <td>9963666068</td>
    </tr>
	<tr class="table-warning">
	  <td>5</td>
	  <td>Free Time Learn</td>
	  <td>freetimelearn@gmail.com</td>
	  <td>9010023210</td>
	</tr>
	<tr class="table-danger">
	  <td>6</td>
	  <td>Free Time Learning</td>
	  <td>info@freetimelearning.com</td>
	  <td>9966463846</td>
	</tr>
	<tr class="table-default">
	  <td>7</td>
	  <td>Ramana</td>
	  <td>ramana@freetimelearning.com</td>
	  <td>9963666068</td>
	</tr>
	<tr class="table-info">
      <td>8</td>
      <td>Suresh</td>
      <td>sureshreddy@freetimelearning.com</td>
	  <td>9963666068</td>
    </tr>
	<tr class="table-dark">
      <td>9</td>
      <td>vsr</td>
      <td>vsr@freetimelearning.com</td>
	  <td>9010023210</td>
    </tr>
  </tbody>
</table>
Output :
<table class="table table-dark table-bordered">
  <thead>
	<tr>
	  <th scope="col">S.No</th>
	  <th scope="col">Name</th>
	  <th scope="col">Email Id</th>
	  <th scope="col">Mobile</th>
	</tr>
  </thead>
  <tbody>
	<tr class="bg-active">
	  <td>1</td>
	  <td>Free Time Learn</td>
	  <td>freetimelearn@gmail.com</td>
	  <td>9010023210</td>
	</tr>
	<tr class="bg-primary">
	  <td>2</td>
	  <td>Free Time Learning</td>
	  <td>info@freetimelearning.com</td>
	  <td>9966463846</td>
	</tr>
	<tr class="bg-success">
	  <td>3</td>
	  <td>Ramana</td>
	  <td>ramana@freetimelearning.com</td>
	  <td>9963666068</td>
	</tr>
	<tr class="bg-light">
      <td>4</td>
      <td>Suresh</td>
      <td>sureshreddy@freetimelearning.com</td>
	  <td>9963666068</td>
    </tr>
	<tr class="bg-warning">
	  <td>5</td>
	  <td>Free Time Learn</td>
	  <td>freetimelearn@gmail.com</td>
	  <td>9010023210</td>
	</tr>
	<tr class="bg-danger">
	  <td>6</td>
	  <td>Free Time Learning</td>
	  <td>info@freetimelearning.com</td>
	  <td>9966463846</td>
	</tr>
	<tr class="bg-default">
	  <td>7</td>
	  <td>Ramana</td>
	  <td>ramana@freetimelearning.com</td>
	  <td>9963666068</td>
	</tr>
	<tr class="bg-info">
      <td>8</td>
      <td>Suresh</td>
      <td>sureshreddy@freetimelearning.com</td>
	  <td>9963666068</td>
    </tr>
	<tr class="bg-dark">
      <td>9</td>
      <td>vsr</td>
      <td>vsr@freetimelearning.com</td>
	  <td>9010023210</td>
    </tr>
  </tbody>
</table>
Output :

We see you’re using an ad blocker.

Our website is made possible by displaying ads to our visitors.

Please help us continue to provide you with free. So please disabling your ad blocker.