how to give color to table header in bootstrap?

Hi Friends 👋,

Welcome To aGuideHub! ❤️

In this tutorial, we will learn how to give color to table header in bootstrap.

To give color to the table header, put .thead-danger class to change the color of the table header.

To change a background-color of <thead> (or any other element) use our color classes. If you are going to use a danger background you should also consider white text (to provide a proper contrast) by adding the .text-white class.

Table of contents

  • Includes bootstrap view
  • Includes bootstrap library
  • Includes css in html page
  • Define its class name

Step 1: Includes bootstrap view

To ensure proper rendering and touch zooming for all devices, add the responsive viewport meta tag to your <head>.

 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

Step 2: Includes bootstrap library

First of all, load the Bootstrap framework CSS into the head tag of your webpage.

<!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
        integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

Step 3: Includes css in html page

Here we are using in css background-color: #af1919 !important; class to create change color of header.

        .table .thead-danger th {
            background-color: #af1919 !important;
        }

        tbody {
            background: lightgrey;
        }

        .container {
            padding: 0 !important;
        }

Step 4: Define its class name

Here we will use the bootstrap class to change the color header of an in the table.

    <div class="container">
        <table class="table">
            <thead class="thead-danger text-white">
                <tr>
                    <th scope="col"></th>
                    <th scope="col">First</th>
                    <th scope="col">Last</th>
                    <th scope="col">Address</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th scope="row"></th>
                    <td>Mohan</td>
                    <td>Tiwari</td>
                    <td>Rampur</td>
                </tr>
                <tr>
                    <th scope="row"></th>
                    <td>Radha</td>
                    <td>Mishra</td>
                    <td>Miraroad</td>
                </tr>
                <tr>
                    <th scope="row"></th>
                    <td>Sonam</td>
                    <td>Rajput</td>
                    <td>Rajsthan</td>
                </tr>
            </tbody>
        </table>
    </div>

Example.

Let’s look at the following example to understand how it basically works:

<!doctype html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
        integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <style>
        .table .thead-danger th {
            background-color: #af1919 !important;
        }

        tbody {
            background: lightgrey;
        }

        .container {
            padding: 0 !important;
        }
    </style>
</head>

<body>
    <div class="container">
        <table class="table">
            <thead class="thead-danger text-white">
                <tr>
                    <th scope="col"></th>
                    <th scope="col">First</th>
                    <th scope="col">Last</th>
                    <th scope="col">Address</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th scope="row"></th>
                    <td>Mohan</td>
                    <td>Tiwari</td>
                    <td>Rampur</td>
                </tr>
                <tr>
                    <th scope="row"></th>
                    <td>Radha</td>
                    <td>Mishra</td>
                    <td>Miraroad</td>
                </tr>
                <tr>
                    <th scope="row"></th>
                    <td>Sonam</td>
                    <td>Rajput</td>
                    <td>Rajsthan</td>
                </tr>
            </tbody>
        </table>
    </div>
</body>

</html>

Check the output of the above code example.

Bootstrap, Table, Header

All the best 👍

Premium Content

You can get all the below premium content directly in your mail when you subscribe us

Books

Interview Questions

Soon You will get CSS, JavaScript, React Js, and TypeScript So Subscribe to it.

Portfolio Template

View | Get Source Code

Cheat Sheets

Cheat Sheets Books are basically Important useful notes which we use in our day-to-day life.

Related Posts