Bootstrap even provides a handful of contextual classes such as .table-primary, .table-secondary, .table-success, .table-danger, .table-warning, .table-info, .table-light and .table-dark to color tables, table rows or individual cells.

For example, you can create a dark version of the table (i.e. table with light text on dark backgrounds) by adding the contextual class .table-dark to the .table base class, like this:

Example

<table class="table table-dark">
    <thead>
        <tr>
            <th>#</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Email</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>Clark</td>
            <td>Kent</td>
            <td>clarkkent@mail.com</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Peter</td>
            <td>Parker</td>
            <td>peterparker@mail.com</td>
        </tr> 
        <tr>
            <td>3</td>
            <td>John</td>
            <td>Carter</td>
            <td>johncarter@mail.com</td>
        </tr>                   
    </tbody>
</table>

— The output of the above example will look something like this:

Similarly, you can use other contextual classes. For instance, the following example uses the class .table-success on the .table to create green colored variant of a table.

Example

<table class="table table-success">
    <thead>
        <tr>
            <th>#</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Email</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>Clark</td>
            <td>Kent</td>
            <td>clarkkent@mail.com</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Peter</td>
            <td>Parker</td>
            <td>peterparker@mail.com</td>
        </tr> 
        <tr>
            <td>3</td>
            <td>John</td>
            <td>Carter</td>
            <td>johncarter@mail.com</td>
        </tr>                   
    </tbody>
</table>

— The output of the above example will look something like this:

Tip: You can use these contextual classes on the .table base class to create colored version of any table such as stripped, hoverable, bordered, compact table, and so on.

Similar to the tables you can also use these contextual classes to emphasize the rows within a table. Here’s an example of a table with emphasized rows, let’s take a look:

Example

<table class="table">
    <thead>
        <tr>
            <th>#</th>
            <th>Bill</th>
            <th>Payment Date</th>
            <th>Payment Status</th>
        </tr>
    </thead>
    <tbody>
        <tr class="table-primary">
            <td>1</td>
            <td>Credit Card</td>
            <td>04/07/2021</td>
            <td>Waiting for statement</td>
        </tr>
        <tr class="table-secondary">
            <td>2</td>
            <td>Insurance</td>
            <td>02/07/2021</td>
            <td>Cancelled</td>
        </tr>
        <tr class="table-success">
            <td>3</td>
            <td>Water</td>
            <td>01/07/2021</td>
            <td>Paid</td>
        </tr>
        <tr class="table-info">
            <td>4</td>
            <td>Internet</td>
            <td>05/07/2021</td>
            <td>Change plan</td>
        </tr>
        <tr class="table-warning">
            <td>5</td>
            <td>Electricity</td>
            <td>03/07/2021</td>
            <td>Pending</td>
        </tr>
        <tr class="table-danger">
            <td>6</td>
            <td>Telephone</td>
            <td>06/07/2021</td>
            <td>Due</td>
        </tr>
        <tr class="table-light">
            <td>7</td>
            <td>Car Service</td>
            <td>08/07/2021</td>
            <td>Call in to confirm</td>
        </tr>
        <tr class="table-dark">
            <td>8</td>
            <td>Gas</td>
            <td>06/07/2021</td>
            <td>Payment failed</td>
        </tr>
    </tbody>
</table>

— The output of the above example will look something like this: