Bootstrap 5 Table Active Tables
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
Please Login to comment...