Table header color

Bootstrap 5 Table header color component

Responsive Table header color built with Bootstrap 5. A simple example of giving color to a table header.

Basic example

Choose a color for your table header, add this color to the .table-* class and put everything in the <thead> element.

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
Edit in sandbox 
<table class="table">
    <thead class="table-dark">
        <tr>
            <th scope="col">#</th>
            <th scope="col">First</th>
            <th scope="col">Last</th>
            <th scope="col">Handle</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">1</th>
            <td>Mark</td>
            <td>Otto</td>
            <td>@mdo</td>
        </tr>
        <tr>
            <th scope="row">2</th>
            <td>Jacob</td>
            <td>Thornton</td>
            <td>@fat</td>
        </tr>
        <tr>
            <th scope="row">3</th>
            <td>Larry</td>
            <td>the Bird</td>
            <td>@twitter</td>
        </tr>
    </tbody>
</table>
# First Last Handle
# First Last Handle
# First Last Handle
# First Last Handle
# First Last Handle
# First Last Handle
# First Last Handle
# First Last Handle
# First Last Handle
Edit in sandbox 
<table class="table">
    <thead>
        ...
    </thead>
</table>

<table class="table">
    <thead class="table-primary">
        ...
    </thead>
</table>

<table class="table">
    <thead class="table-secondary">
        ...
    </thead>
</table>

<table class="table">
    <thead class="table-success">
        ...
    </thead>
</table>

<table class="table">
    <thead class="table-danger">
        ...
    </thead>
</table>

<table class="table">
    <thead class="table-warning">
        ...
    </thead>
</table>

<table class="table">
    <thead class="table-info">
        ...
    </thead>
</table>

<table class="table">
    <thead class="table-light">
        ...
    </thead>
</table>

<table class="table">
    <thead class="table-dark">
        ...
    </thead>
</table>