Bootstrap 5 Tutorial
v5.3.0Table Colors in Bootstrap 5
Table Colors: Use contextual color classes to style table rows and cells with semantic meaning.
Contextual Table Classes
Bootstrap provides contextual classes to color table rows and cells based on their meaning or status.
| Class | Description | Usage | Example |
|---|
.table-primary | Primary action or highlight | Selected items, main actions | Primary row |
.table-secondary | Secondary content | Less important items | Secondary row |
.table-success | Successful or positive action | Completed tasks, success states | Success row |
.table-danger | Dangerous or negative action | Errors, warnings, deletions | Danger row |
.table-warning | Warning or caution needed | Pending items, warnings | Warning row |
.table-info | Informational content | Notes, information, details | Info row |
.table-light | Light background variant | Subtle highlights | Light row |
.table-dark | Dark background variant | Important items, headers | Dark row |
<!-- Contextual table rows -->
<table class="table">
<tbody>
<tr class="table-primary">
<td>Primary</td>
<td>Highlighted content</td>
</tr>
<tr class="table-success">
<td>Success</td>
<td>Completed action</td>
</tr>
<tr class="table-danger">
<td>Danger</td>
<td>Error or issue</td>
</tr>
<tr class="table-warning">
<td>Warning</td>
<td>Needs attention</td>
</tr>
<tr class="table-info">
<td>Info</td>
<td>Informational</td>
</tr>
</tbody>
</table>Table Header Colors
| # | Product | Price | Stock |
|---|
| 1 | Laptop | $999 | 15 |
| 2 | Mouse | $49 | 42 |
| # | Product | Price | Stock |
|---|
| 1 | Keyboard | $129 | 28 |
| 2 | Monitor | $299 | 12 |
<!-- Colored table headers -->
<table class="table">
<thead class="table-primary">
<tr>
<th>#</th>
<th>Product</th>
</tr>
</thead>
<!-- body -->
</table>
<table class="table">
<thead class="table-dark">
<tr>
<th>#</th>
<th>Product</th>
</tr>
</thead>
<!-- body -->
</table>Individual Cell Coloring
Apply color classes directly to <td> or <th> elements for granular control.
| Metric | Q1 | Q2 | Q3 | Q4 | Total |
|---|
| Revenue | $125,000 | $135,000 | $110,000 | $95,000 | $465,000 |
|---|
| Expenses | $85,000 | $75,000 | $65,000 | $60,000 | $285,000 |
|---|
| Profit | $40,000 | $60,000 | $45,000 | $35,000 | $180,000 |
|---|
Color Coding System
- Green: Positive performance
- Yellow: Moderate performance
- Red: Negative performance
- Blue: Totals/Summaries
- Light Blue: Information
Code Example
<!-- Individual cell coloring -->
<table class="table">
<tbody>
<tr>
<td>Normal Cell</td>
<td class="table-success">Success Cell</td>
<td class="table-warning">Warning Cell</td>
<td class="table-danger">Danger Cell</td>
</tr>
<tr>
<td class="table-primary">Primary Cell</td>
<td class="table-info">Info Cell</td>
<td class="table-light">Light Cell</td>
<td class="table-dark text-white">Dark Cell</td>
</tr>
</tbody>
</table>Striped Tables with Colors
| # | Feature | Status |
|---|
| 1 | User Authentication | Active |
| 2 | Payment Processing | Active |
| 3 | Email Notifications | Pending |
| 4 | Analytics Dashboard | Active |
| 5 | Mobile App | In Development |
<!-- Striped table with color -->
<table class="table table-striped table-primary">
<thead>
<tr>
<th>#</th>
<th>Feature</th>
</tr>
</thead>
<tbody>
<!-- Striped rows with primary color -->
</tbody>
</table>Note: Striped tables with colors create alternating light and dark shades of the same color for better readability.
Hover Effects with Colors
| # | Task | Assignee | Due Date | Status |
|---|
| 1 | Design Review | John Smith | 2023-10-15 | Completed |
| 2 | Code Implementation | Jane Doe | 2023-10-20 | In Progress |
| 3 | Testing Phase | Bob Johnson | 2023-10-25 | Pending |
| 4 | Documentation | Alice Brown | 2023-10-30 | Not Started |
| 5 | Deployment | Charlie Wilson | 2023-11-05 | Scheduled |
Combination Examples
<!-- Colored table with hover -->
<table class="table table-hover table-primary">
<!-- Hover effect on primary colored rows -->
</table>
<!-- Striped colored table with hover -->
<table class="table table-striped table-hover table-success">
<!-- Striped success with hover -->
</table>
<!-- Bordered colored table with hover -->
<table class="table table-bordered table-hover table-warning">
<!-- Bordered warning with hover -->
</table>Hover Behavior
- Color intensity: Hover darkens the row color
- Consistency: Works with all table color variants
- Accessibility: Provides visual feedback
- Customization: Can be customized with CSS
- Performance: CSS-based, no JavaScript needed
- Mobile friendly: Works on touch devices
Color Combinations and Patterns
| Priority | Bug ID | Description | Status |
|---|
| Critical | BUG-101 | Login not working | Open |
| High | BUG-102 | Payment page slow | In Progress |
| Medium | BUG-103 | Typo in FAQ page | Resolved |
| Low | BUG-104 | Profile picture upload | Closed |
| Info | BUG-105 | New feature request | Review |
Color Pattern Meaning
CriticalHighMediumLowInfo
| Order # | Customer | Amount | Status |
|---|
| ORD-1001 | John Smith | $299.99 | Delivered |
| ORD-1002 | Jane Doe | $149.50 | Shipped |
| ORD-1003 | Bob Johnson | $499.99 | Processing |
| ORD-1004 | Alice Brown | $89.99 | Pending |
| ORD-1005 | Charlie Wilson | $199.99 | Cancelled |
Status Color Mapping
- Delivered: Green
- Shipped: Blue
- Processing: Yellow
- Pending: Light Blue
- Cancelled: Red
Custom Table Colors
Create custom table color classes using CSS or SCSS.
| Custom Purple | #6f42c1 |
| Custom Pink | #e83e8c |
| Custom Teal | #20c997 |
| Custom Orange | #fd7e14 |
| Custom Indigo | #6610f2 |
| Custom Cyan | #17a2b8 |
CSS Custom Classes
/* Custom table color classes */
.table-custom-purple {
--bs-table-bg: #6f42c1;
--bs-table-striped-bg: #5a36a0;
--bs-table-striped-color: #fff;
--bs-table-active-bg: #4d2e8a;
--bs-table-active-color: #fff;
--bs-table-hover-bg: #543596;
--bs-table-hover-color: #fff;
color: #fff;
border-color: #5a36a0;
}
.custom-table-purple {
background-color: #6f42c1;
color: white;
}
.custom-table-purple:hover {
background-color: #5a36a0;
}
/* Create multiple custom classes */
.custom-table-teal {
background-color: #20c997;
color: white;
}
.custom-table-orange {
background-color: #fd7e14;
color: white;
}SCSS Customization
// SCSS: Extend table variants
$custom-colors: (
"purple": #6f42c1,
"pink": #e83e8c,
"teal": #20c997,
"orange": #fd7e14,
"indigo": #6610f2,
"cyan": #17a2b8
);
@each $name, $color in $custom-colors {
.table-#{$name} {
--bs-table-bg: #{$color};
--bs-table-striped-bg: #{darken($color, 10%)};
--bs-table-striped-color: #fff;
--bs-table-active-bg: #{darken($color, 15%)};
--bs-table-active-color: #fff;
--bs-table-hover-bg: #{darken($color, 5%)};
--bs-table-hover-color: #fff;
color: #fff;
border-color: #{darken($color, 10%)};
}
}
// Import Bootstrap
@import "bootstrap/scss/bootstrap";Accessibility Considerations
WCAG Guidelines for Color
- Contrast ratio: Minimum 4.5:1 for normal text
- Color blindness: Don't rely solely on color
- Alternative indicators: Use icons, text, or patterns
- Text readability: Ensure text is readable on colored backgrounds
- Testing: Test with accessibility tools
- Focus states: Maintain visible focus indicators
Warning: Some color combinations (like yellow text on white) have poor contrast and should be avoided.
| Status | Good Example | Poor Example |
|---|
| Success | ✅ Dark text on light green | ❌ White text on dark green |
| Warning | ✅ Dark text on yellow | ❌ White text on yellow |
| Danger | ✅ Dark text on light red | ❌ White text on dark red |
| Info | ✅ Dark text on light blue | ❌ White text on dark blue |
Tip: Use .table-* classes instead of .bg-* for better accessibility as they provide appropriate text colors.
Best Practices for Table Colors
Color Usage Guidelines
- ✅ Use colors consistently throughout your application
- ✅ Follow semantic meaning (green for success, red for errors)
- ✅ Ensure sufficient contrast for accessibility
- ✅ Don't use too many different colors in one table
- ✅ Use colors to highlight, not decorate
- ✅ Test color schemes in different lighting conditions
- ✅ Consider color-blind users when choosing colors
When to Use Which Color
- Primary: Main actions, selected items
- Success: Completed tasks, positive results
- Danger: Errors, warnings, deletions
- Warning: Pending items, cautions
- Info: Informational content, notes
- Light/Dark: Visual separation, headers
