In the preceding table, is the basic version of a Bootstrap table with light padding and horizontal dividers only. The syntax is as follows:

<table class="table"> ... </table>

The structure of striped rows is the same as that of the basic table, its style is similar to the strips of zebra crossing, that is, lighter and darker alternative rows:

<table class="table table-striped"> ... </table>

This class converts a table into equal divisions with visible boundaries. Each division contains a single value:

<table class="table table-bordered"> ... </table>

This class adds the feature that highlights the row on which the mouse hovers:

<table class="table table-hover"> ... </table>

A more squeezed and smaller version of a table can be achieved by decreasing the padding between rows:

<table class="table table-condensed"> ... </table>

Contextual classes when applied to table rows or cells, give them predefined colors. Here are a few available classes:

We can set entire rows or individual cells to display a certain color to denote a particular message. Here is an example of how this can be achieved:

<!-- Contextual classes when applied on rows -->
<tr class="active">...</tr>
<tr class="success">...</tr>
<tr class="warning">...</tr>
<tr class="danger">...</tr>

<!-- Contextual classes when applied on cells (`td` or `th`) -->
<tr> <td class="active">...</td>
<td class="success">...</td>
<td class="warning">...</td>
<td class="danger">...</td> </tr>

Responsive tables adjust themselves to scroll horizontally on small devices. The difference is only visible on small devices:

<div class="table-responsive">
  <table class="table"> ... </table>
</div>