Open In App

Bootstrap 5 Table Active Tables

Improve
Improve
Like Article
Like
Save
Share
Report

Bootstrap 5 Table Active tables are used to make the table row, cell or column highlighted. We just need to put the dedicated class in that particular place. 

Bootstrap 5 Table Active tables Class:

  • table-active: This is used to highlight the row of the table.

Syntax

<tr class="table-active">
      ...
</tr>

Example 1: In this example, we will learn about tables with a table-active class.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <!--Bootstrap CDN -->
    <link href=
          rel="stylesheet" 
          integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
          crossorigin="anonymous">
</head>
  
<body>
    <div class="container text-center col-6">
        <h1 class="text-success">
            GeeksforGeeks
        </h1>
        <h2>Bootstrap 5 Table Active tables</h2>
  
        <table class="table">
            <thead>
                <tr>
                    <td>State</td>
                    <td>Capital</td>
                </tr>
            </thead>
            <tbody>
                <tr class="table-active">
                    <td>Uttar Pradesh</td>
                    <td>Lucknow</td>
                </tr>
                <tr>
                    <td>Punjab</td>
                    <td>Chandigarh</td>
                </tr>
                <tr>
                    <td>Goa</td>
                    <td>Panaji</td>
                </tr>
                <tr>
                    <td>Himachal Pradesh</td>
                    <td>Shimla</td>
                </tr>
            </tbody>
        </table>
    </div>
</body>
  
</html>


Output:

Bootstrap 5 Table Active Tables

Example 2: In this example, we will learn about tables with a dark theme.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <!--Bootstrap CDN -->
    <link href=
          rel="stylesheet" 
          integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
          crossorigin="anonymous">
</head>
  
<body>
    <div class="container text-center col-6">
        <h1 class="text-success">
          GeeksforGeeks
        </h1>
        <h2>Bootstrap 5 Table Active tables</h2>
     
        <table class="table table-dark">
            <thead>
              <tr>
                <td>State</td>
                <td>Capital</td>
              </tr>
            </thead>
            <tbody>
              <tr class="table-active">
                <td>Uttar Pradesh</td>
                <td>Lucknow</td>
              </tr>
              <tr>
                <td>Punjab</td>
                <td>Chandigarh</td>
              </tr>
              <tr>
                <td>Goa</td>
                <td>Panaji</td>
              </tr>
              <tr>
                <td>Himachal Pradesh</td>
                <td>Shimla</td>
              </tr>
            </tbody>
        </table>    
    </div>
</body>
</html>


Output:

Bootstrap 5 Table Active Tables

Reference Link: https://getbootstrap.com/docs/5.0/content/tables/#active-tables



Last Updated : 14 Dec, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads