What is contextual classes of table in bootstrap?

May 25, 2022

Hi Friends 👋,

Welcome To aGuideHub! ❤️

In this tutorial, we walk through the complete process of creating a used to get a contextual classes of table on rows.

Bootstrap provides a number of contextual classes that can be used to color the entire row or a single cell of a table. These classes should be used with the light table and not with the dark table for a better appearance.

Syntax:

<table class="table">
    <tr class="table- * ">
        Content
    </tr>
<table>

Table of contents

Includes bootstrap view
Includes bootstrap library
Define its class name

This article will guide you to adding contextual classes of table in Bootstrap with example.

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">

Step 2: Includes bootstrap library

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

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
    </script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
    </script>

Step 3: Define its class name

Here we will define class table primary.

    <div class="container">
        <h1 style="text-align:center;color:#f50909;">
            aGuideHub
        </h1>
        <!-- Bootstrap table class -->
        <table class="table">
            <thead>
                <tr class="table-primary">
                    <th scope="col">S. No. table-primary</td>
                    <th scope="col">Name</td>
                    <th scope="col">City</td>
                    <th scope="col">Age</td>
                </tr>
            </thead>
            <tbody>
                <tr class="table-secondary">
                    <td scope="row">1 table-secondary</td>
                    <td>Ajay</td>
                    <td>Patna</td>
                    <td>20</td>
                </tr>
                <tr class="table-success">
                    <td scope="row">2 table-success</td>
                    <td>Rahul</td>
                    <td>Chandigarh</td>
                    <td>17</td>
                </tr>
                <tr class="table-info">
                    <td scope="row">3 table-info</td>
                    <td>Nikita</td>
                    <td>Mumbai</td>
                    <td>17</td>
                </tr>
                <tr class="table-dark">
                    <td scope="row">4 table-dark</td>
                    <td>Somya</td>
                    <td>Delhi</td>
                    <td>17</td>
                </tr>
                <tr class="table-active">
                    <td scope="row">5 table-active</td>
                    <td>Eshika</td>
                    <td>Noida</td>
                    <td>22</td>
                </tr>
                <tr class="table-danger">
                    <td scope="row">6 table-danger</td>
                    <td>Deeksha</td>
                    <td>Bengaluru</td>
                    <td>21</td>
                </tr>
                <tr class="table-light">
                    <td scope="row">7 table-light</td>
                    <td>Parul</td>
                    <td>Shimla</td>
                    <td>17</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>
    <title>Bootstrap Tables</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
    </script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
    </script>
</head>

<body>
    <div class="container">
        <h1 style="text-align:center;color:#f50909;">
            aGuideHub
        </h1>
        <!-- Bootstrap table class -->
        <table class="table">
            <thead>
                <tr class="table-primary">
                    <th scope="col">S. No. table-primary</td>
                    <th scope="col">Name</td>
                    <th scope="col">City</td>
                    <th scope="col">Age</td>
                </tr>
            </thead>
            <tbody>
                <tr class="table-secondary">
                    <td scope="row">1 table-secondary</td>
                    <td>Ajay</td>
                    <td>Patna</td>
                    <td>20</td>
                </tr>
                <tr class="table-success">
                    <td scope="row">2 table-success</td>
                    <td>Rahul</td>
                    <td>Chandigarh</td>
                    <td>17</td>
                </tr>
                <tr class="table-info">
                    <td scope="row">3 table-info</td>
                    <td>Nikita</td>
                    <td>Mumbai</td>
                    <td>17</td>
                </tr>
                <tr class="table-dark">
                    <td scope="row">4 table-dark</td>
                    <td>Somya</td>
                    <td>Delhi</td>
                    <td>17</td>
                </tr>
                <tr class="table-active">
                    <td scope="row">5 table-active</td>
                    <td>Eshika</td>
                    <td>Noida</td>
                    <td>22</td>
                </tr>
                <tr class="table-danger">
                    <td scope="row">6 table-danger</td>
                    <td>Deeksha</td>
                    <td>Bengaluru</td>
                    <td>21</td>
                </tr>
                <tr class="table-light">
                    <td scope="row">7 table-light</td>
                    <td>Parul</td>
                    <td>Shimla</td>
                    <td>17</td>
                </tr>
            </tbody>
        </table>
    </div>
</body>

</html>

Check the output of the above code example.

All the best 👍

What is contextual classes of table in bootstrap?

Step 1: Includes bootstrap view

Step 2: Includes bootstrap library

Step 3: Define its class name

Example.

Premium Content

Books

Portfolio Template

Cheat Sheets

Related Posts