What is Contextual classes of table in Bootstrap ? - Coding

Bootstrap provides a series of classes that can be used to apply various styling to the tables such as changing the heading appearance, making the rows stripped, adding or removing borders, making rows hoverable, etc. Bootstrap also provides classes for making tables responsive.

Simple Table: The .table class is used to create a simple Bootstrap table. This class name is used with the <table> tag to create a table.

Syntax:

<table class="table"> 
    Table Contents... 
<table>

Example: In this example, we will see the use of context classes of tables in Bootstrap.

HTML

<!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:green;">
                GeeksforGeeks
            </h1>
            <!-- Bootstrap table class -->
            <table class="table">
                <thead>
                    <tr>
                        <th scope="col">S. No.</td>
                        <th scope="col">Name</td>
                        <th scope="col">City</td>
                        <th scope="col">Age</td>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <th scope="row">1</td>
                        <td>Akshit</td>
                        <td>Moradabad</td>
                        <td>20</td>
                    </tr>
                    <tr>
                        <th scope="row">2</td>
                        <td>Nikita</td>
                        <td>Lucknow</td>
                        <td>21</td>
                    </tr>
                    <tr>
                        <th scope="row">3</td>
                        <td>Parul</td>
                        <td>Dehradun</td>
                        <td>22</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </body>
</html>

Output:

Learn about contextual classes of Tables in Bootstrap

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. The list of contextual classes is given below.

table-primary
table-secondary
table-success
table-danger
table-warning
table-info
table-light
table-dark
table-active

Syntax:

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

Example: In this example, we will color the row of the table.

HTML

<!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:green;">
                GeeksforGeeks
            </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-light">
                        <td scope="row">4 (table-light)</td>
                        <td>Parul</td>
                        <td>Shimla</td>
                        <td>17</td>
                    </tr>
                    <tr class="table-dark">
                        <td scope="row">5 (table-dark)</td>
                        <td>Somya</td>
                        <td>Delhi</td>
                        <td>17</td>
                    </tr>
                    <tr class="table-active">
                        <td scope="row">6 (table-active)</td>
                        <td>Eshika</td>
                        <td>Noida</td>
                        <td>22</td>
                    </tr>
                    <tr class="table-danger">
                        <td scope="row">7(table-danger)</td>
                        <td>Deeksha</td>
                        <td>Bengaluru</td>
                        <td>21</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </body>
</html>

Output:

Reffered: https://www.geeksforgeeks.org

Bootstrap

Related
Explain media object and their types in Bootstrap
Why Bootstrap is used for mobile application developments ?
What is Image Thumbnail in Bootstrap 4 ?
Explain function of the md-grid class in Bootstrap
How Many Colors available in Bootstrap 4 ?

Type:	Geek
Category:	Coding
Sub Category:	Tutorial
Uploaded by:	Admin
Views:	12