What is contextual classes of table in bootstrap?

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.

Bootstrap, Contextual, Table

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