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 >
< 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 >
< 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
Share your thoughts in the comments
Please Login to comment...