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 :