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>