Bootstrap 5 Tutorial
v5.3.0Bootstrap 5 Tutorial
Button Colors in Bootstrap 5
Button Colors: Bootstrap provides contextual color classes that convey meaning through color.
Contextual Colors
Each color has a specific semantic meaning to help users understand the button"s purpose.
All Button Colors
Main action, primary purpose
Secondary action, less important
Positive action, success state
Destructive action, error state
Caution needed, warning state
Informational action
Light background theme
Dark background theme
Navigation or less prominent
<!-- Button Color Classes -->
<button class="btn btn-primary">Primary</button>
<button class="btn btn-secondary">Secondary</button>
<button class="btn btn-success">Success</button>
<button class="btn btn-danger">Danger</button>
<button class="btn btn-warning">Warning</button>
<button class="btn btn-info">Info</button>
<button class="btn btn-light">Light</button>
<button class="btn btn-dark">Dark</button>
<button class="btn btn-link">Link</button>Color Meanings and Usage
| Color Class | Default Color | Semantic Meaning | Common Usage | Accessibility Rating |
|---|---|---|---|---|
.btn-primary | #0d6efd | Primary action | Submit, Continue, Save | ⭐⭐⭐⭐⭐ |
.btn-success | #198754 | Success, positive | Approve, Confirm, Done | ⭐⭐⭐⭐⭐ |
.btn-danger | #dc3545 | Danger, error | Delete, Cancel, Stop | ⭐⭐⭐⭐⭐ |
.btn-warning | #ffc107 | Warning, caution | Warning, Attention | ⭐⭐⭐ (requires dark text) |
.btn-info | #0dcaf0 | Information | Info, Details, Help | ⭐⭐⭐⭐ |
Color Customization
You can customize button colors using CSS variables or SCSS.
Custom Colors with CSS Variables
<!-- Custom Button with CSS Variables -->
<style>
.custom-btn {
--bs-btn-color: #fff;
--bs-btn-bg: #9c27b0;
--bs-btn-border-color: #9c27b0;
--bs-btn-hover-color: #fff;
--bs-btn-hover-bg: #7b1fa2;
--bs-btn-hover-border-color: #7b1fa2;
}
</style>
<button class="btn custom-btn">Custom Purple Button</button>Accessibility Considerations
Color Accessibility Guidelines
- ✅ Ensure minimum contrast ratio of 4.5:1 for normal text
- ✅ Ensure minimum contrast ratio of 3:1 for large text
- ✅ Don"t rely on color alone to convey meaning
- ✅ Test with color blindness simulators
- ✅ Provide alternative indicators (icons, text)
- ✅ Maintain consistent color meanings throughout your app
Color Psychology in UI Design
Positive Colors
- Green (Success): Growth, approval, safety
- Blue (Primary): Trust, stability, confidence
- Teal (Info): Clarity, communication
Caution Colors
- Red (Danger): Urgency, stop, error
- Orange (Warning): Warning, attention needed
- Yellow (Warning): Caution, temporary
