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.
<!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=
"https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css"/>
</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.
<!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=
"https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css"/>
</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.
<!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=
"https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css"/>
</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