Bootstrap 5 Table Variants
Last Updated :
09 Dec, 2022
Bootstrap 5 Table Variants can be used to color the whole tables, table rows, or an individual cell of a table.
Bootstrap 5 Table Variants Class:
- table-*: This class is used to color a table, its row, or a cell to bootstrap’s pre-defined color.
Syntax:
<!-- Coloring whole table -->
<table class="table-*">
...
</table>
<!-- Coloring table row -->
<tr class="table-*">
...
</tr>
<!-- Coloring table cell -->
<td class="table-*">
...
</td>
The ‘*‘ can be replaced by primary/secondary/success/danger/warning/info/light/dark to change the color.
Example 1: In this example, we show the use of the above table variants classes to change the color of a table.
HTML
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta http-equiv = "X-UA-Compatible"
content = "IE=edge" >
< meta name = "viewport"
content = "width=device-width, initial-scale=1.0" >
< link rel = "stylesheet"
href =
</ head >
< body >
< div class = "container" >
< div class = "my-4" >
< h1 class = "text-success" >
GeeksforGeeks
</ h1 >
< strong >
Bootstrap 5 Table Variants
</ strong >
</ div >
< table class = "table table-primary" >
< thead >
< tr >
< th scope = "col" >Name</ th >
< th scope = "col" >Age</ th >
< th scope = "col" >Profession</ th >
</ tr >
</ thead >
< tbody >
< tr >
< td >Varun</ td >
< td >20</ td >
< td >Student</ td >
</ tr >
< tr >
< td >Tanishka</ td >
< td >19</ td >
< td >Student</ td >
</ tr >
< tr >
< td >Bobby</ td >
< td >47</ td >07
< td >Professor</ td >
</ tr >
</ tbody >
</ table >
< table class = "table table-danger" >
< thead >
< tr >
< th scope = "col" >Name</ th >
< th scope = "col" >Age</ th >
< th scope = "col" >Profession</ th >
</ tr >
</ thead >
< tbody >
< tr >
< td >Varun</ td >
< td >20</ td >
< td >Student</ td >
</ tr >
< tr >
< td >Tanishka</ td >
< td >19</ td >
< td >Student</ td >
</ tr >
< tr >
< td >Bobby</ td >
< td >47</ td >
< td >Professor</ td >
</ tr >
</ tbody >
</ table >
</ div >
</ body >
</ html >
|
Output:
Example 2: In this example, we used the table variants classes to color the table rows.
HTML
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta http-equiv = "X-UA-Compatible"
content = "IE=edge" >
< meta name = "viewport"
content = "width=device-width, initial-scale=1.0" >
< link rel = "stylesheet"
href =
</ head >
< body >
< div class = "container" >
< div class = "my-4" >
< h1 class = "text-success" >
GeeksforGeeks
</ h1 >
< strong >
Bootstrap 5 Table Variants
</ strong >
</ div >
< table class = "table" >
< thead >
< tr class = "table-dark" >
< th scope = "col" >Name</ th >
< th scope = "col" >Age</ th >
< th scope = "col" >Profession</ th >
</ tr >
</ thead >
< tbody >
< tr class = "table-danger" >
< td >Varun</ td >
< td >20</ td >
< td >Student</ td >
</ tr >
< tr class = "table-success" >
< td >Tanishka</ td >
< td >19</ td >
< td >Student</ td >
</ tr >
< tr class = "table-warning" >
< td >Bobby</ td >
< td >47</ td >
< td >Professor</ td >
</ tr >
</ tbody >
</ table >
</ div >
</ body >
</ html >
|
Output:
Example 3: In this example, the above-mentioned table variants classes are used to color the individual cells of the table.
HTML
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta http-equiv = "X-UA-Compatible"
content = "IE=edge" >
< meta name = "viewport"
content = "width=device-width, initial-scale=1.0" >
< link rel = "stylesheet"
href =
</ head >
< body >
< div class = "container" >
< div class = "my-4" >
< h1 class = "text-success" >
GeeksforGeeks
</ h1 >
< strong >
Bootstrap 5 Table Variants
</ strong >
</ div >
< table class = "table" >
< thead >
< tr >
< th scope = "col" class = "table-warning" >Name</ th >
< th scope = "col" class = "table-dark" >Age</ th >
< th scope = "col" class = "table-danger" >Profession</ th >
</ tr >
</ thead >
< tbody >
< tr >
< td class = "table-dark" >Varun</ td >
< td class = "table-info" >20</ td >
< td class = "table-warning" >Student</ td >
</ tr >
< tr >
< td class = "table-primary" >Tanishka</ td >
< td class = "table-secondary" >19</ td >
< td class = "table-info" >Student</ td >
</ tr >
< tr >
< td class = "table-success" >Bobby</ td >
< td class = "table-warning" >47</ td >
< td class = "table-danger" >Professor</ td >
</ tr >
</ tbody >
</ table >
</ div >
</ body >
</ html >
|
Output:
Reference: https://getbootstrap.com/docs/5.2/content/tables/#variants
Share your thoughts in the comments
Please Login to comment...