What is Table color variants in Bootsrap?

Bootsrapmarkup~5 mins

Table color variants in Bootsrap

Choose your learning style9 modes available

Learn Why Deep Render Try Challenge Project Recall Perf

Introduction

Table color variants help you make tables easier to read by adding background colors to rows or cells. This makes important data stand out and improves user experience.

You want to highlight different types of data in a table, like success or warning messages.

You need to make a table visually appealing and easier to scan.

You want to show status or categories with colors in a table.

You want to improve accessibility by using color to separate rows or columns.

You want to quickly show different states like active, danger, or info in a table.

Syntax

Bootsrap

<table class="table">
  <thead>
    <tr class="table-primary">
      <th>Header</th>
    </tr>
  </thead>
  <tbody>
    <tr class="table-success">
      <td>Success row</td>
    </tr>
    <tr class="table-danger">
      <td>Danger row</td>
    </tr>
  </tbody>
</table>

Use classes like table-primary, table-success, table-danger, etc. on <tr> or <td> to add colors.

These classes come from Bootstrap and add background colors with good contrast automatically.

Examples

This adds a blue background to the entire row.

Bootsrap

<tr class="table-primary">
  <td>Primary colored row</td>
</tr>

This colors only one cell with a yellow background.

Bootsrap

<td class="table-warning">Warning cell</td>

This colors the whole row green to show success.

Bootsrap

<tr class="table-success">
  <td>Success row</td>
</tr>

This colors the row red to indicate danger or error.

Bootsrap

<tr class="table-danger">
  <td>Danger row</td>
</tr>

Sample Program

This example shows a table with different colored rows and one colored cell using Bootstrap color variant classes.

Bootsrap

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Bootstrap Table Color Variants</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
  <main class="container mt-4">
    <h1>Table Color Variants Example</h1>
    <table class="table">
      <thead>
        <tr class="table-primary">
          <th scope="col">Name</th>
          <th scope="col">Status</th>
        </tr>
      </thead>
      <tbody>
        <tr class="table-success">
          <td>John</td>
          <td>Active</td>
        </tr>
        <tr class="table-warning">
          <td>Mary</td>
          <td>Pending</td>
        </tr>
        <tr class="table-danger">
          <td>Steve</td>
          <td>Inactive</td>
        </tr>
        <tr>
          <td>Anna</td>
          <td class="table-info">Info</td>
        </tr>
      </tbody>
    </table>
  </main>
</body>
</html>

OutputSuccess

Important Notes

Use semantic HTML like <th scope="col"> for headers to improve accessibility.

Color variants should not be the only way to convey meaning; combine with text or icons for clarity.

Bootstrap color classes automatically handle text color for good contrast.

Summary

Table color variants add background colors to rows or cells to highlight data.

Use Bootstrap classes like table-success, table-danger, etc. on <tr> or <td>.

They improve readability and user experience by visually grouping or emphasizing table data.