Bootstrap 5 Table Variants
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 = "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" > w3wiki </ 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 = "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" > w3wiki </ 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 = "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" > w3wiki </ 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
Contact Us