Bootstrap 5 Tutorial
v5.3.0Bootstrap 5 Tutorial
Text Colors in Bootstrap 5
Text Colors: Colorize text with color utilities using Bootstrap's theme colors.
Theme Text Colors
All Theme Colors
Primary
.text-primarySecondary
.text-secondarySuccess
.text-successDanger
.text-dangerWarning
.text-warningInfo
.text-infoLight
.text-lightDark
.text-darkBody
.text-bodyMuted
.text-mutedWhite
.text-whiteBlack 50%
.text-black-50White 50%
.text-white-50Note: Text color utilities are generated from the theme colors map, so they work with any color scheme you set up.
Color Usage Examples
Headings with Colors
Primary Heading
Success Heading
Danger Heading
Warning Heading
<h1 class="text-primary">Primary Heading</h1>
<h2 class="text-success">Success Heading</h2>
<h3 class="text-danger">Danger Heading</h3>
<h4 class="text-warning">Warning Heading</h4>Paragraphs with Colors
This is a primary paragraph. Use for important information.
This is a success paragraph. Use for positive messages.
This is a danger paragraph. Use for errors or warnings.
This is muted text. Use for less important information.
<p class="text-primary">Primary text</p>
<p class="text-success">Success text</p>
<p class="text-danger">Danger text</p>
<p class="text-muted">Muted text</p>Links with Contextual Colors
Colored Links
Note: Colored links have
:hover and :focus states with opacity, unlike regular text.Opacity Text Colors
Opacity Utilities
Black with Opacity
Black (100% opacity)
Black (75% opacity)
Black (50% opacity)
Black (25% opacity)
White with Opacity
White (100% opacity)
White (75% opacity)
White (50% opacity)
White (25% opacity)
| Class | Color | Opacity | CSS Equivalent |
|---|---|---|---|
text-black | Black | 100% | color: #000 |
text-black-75 | Black | 75% | color: rgba(0,0,0,.75) |
text-black-50 | Black | 50% | color: rgba(0,0,0,.5) |
text-black-25 | Black | 25% | color: rgba(0,0,0,.25) |
text-white | White | 100% | color: #fff |
text-white-75 | White | 75% | color: rgba(255,255,255,.75) |
text-white-50 | White | 50% | color: rgba(255,255,255,.5) |
text-white-25 | White | 25% | color: rgba(255,255,255,.25) |
Responsive Text Colors
Breakpoint-based Text Colors
Example: Different Colors on Different Screens
This text is primary on mobile, success on tablet, and danger on desktop.
| Screen Size | Class Applied | Color | Use Case |
|---|---|---|---|
| Mobile (<768px) | text-primary | Primary (Blue) | Default mobile color |
| Tablet (≥768px) | text-md-success | Success (Green) | Highlight on tablet |
| Desktop (≥992px) | text-lg-danger | Danger (Red) | Attention on desktop |
More Examples
Danger on mobile, warning on small+, success on medium+.
Muted on mobile, primary on large screens.
<!-- Responsive text colors -->
<p class="text-primary text-md-success text-lg-danger">
Changes color at different breakpoints
</p>
<p class="text-muted text-lg-primary">
Muted on mobile, primary on desktop
</p>
<p class="text-danger text-sm-warning">
Danger on mobile, warning on tablet+
</p>Color Meanings and Use Cases
When to Use Each Color
| Color | Class | Meaning | Use Case | Example |
|---|---|---|---|---|
| Primary | text-primary | Main brand color | Headings, important text | Main title |
| Success | text-success | Positive, successful | Confirmation messages | "Order completed" |
| Danger | text-danger | Error, danger | Error messages, warnings | "Invalid password" |
| Warning | text-warning | Warning, caution | Warning messages | "Action required" |
| Info | text-info | Informational | Information messages | "New feature available" |
| Muted | text-muted | Secondary, less important | Supporting text, captions | Image captions |
| Secondary | text-secondary | Secondary content | Less important headings | Subheadings |
Text Colors with Other Utilities
Combined with Text Alignment
Centered Primary Heading
Right-aligned success text
<h3 class="text-primary text-center">
Centered Primary Heading
</h3>
<p class="text-success text-end">
Right-aligned success text
</p>Combined with Font Weight
Bold danger text for emphasis
Light warning text for subtlety
<p class="text-danger fw-bold">
Bold danger text
</p>
<p class="text-warning fw-light">
Light warning text
</p>Accessibility Considerations
Color Contrast Requirements
- WCAG AA: Minimum contrast ratio of 4.5:1 for normal text
- WCAG AAA: Minimum contrast ratio of 7:1 for normal text
- Large text: 3:1 ratio for text 18pt+ or 14pt+ bold
- Color blindness: Don't rely on color alone to convey meaning
- Testing tools: Use browser extensions to check contrast
Common Issues
- ❌ Using light colors on light backgrounds
- ❌ Using low opacity text that reduces contrast
- ❌ Relying only on color to indicate status
- ❌ Not testing with color blindness simulators
- ❌ Using similar colors that are hard to distinguish
Customizing Text Colors
SCSS Customization
Customize text colors in your SCSS variables:
// Custom theme colors
$primary: #007bff;
$secondary: #6c757d;
$success: #28a745;
$danger: #dc3545;
$warning: #ffc107;
$info: #17a2b8;
$light: #f8f9fa;
$dark: #343a40;
// Custom text colors
$theme-colors: (
"primary": $primary,
"secondary": $secondary,
"success": $success,
"danger": $danger,
"warning": $warning,
"info": $info,
"light": $light,
"dark": $dark,
"custom": #8a2be2 // Add custom color
);
// Generate text color utilities
@import "bootstrap/scss/bootstrap";
// Custom CSS class
.text-custom {
color: #8a2be2 !important;
}Note: After adding custom colors to
$theme-colors map, Bootstrap will automatically generate text color utilities like .text-custom.Practical Examples
Example 1: Status Messages
Order Status
✅ Order #12345 has been shipped
⚠️ Order #12346 is processing
❌ Order #12347 was cancelled
ℹ️ All orders ship within 24 hours
<div class="alert alert-light">
<h5>Order Status</h5>
<p class="text-success">
✅ Order shipped
</p>
<p class="text-warning">
⚠️ Order processing
</p>
<p class="text-danger">
❌ Order cancelled
</p>
</div>Example 2: Form Validation
Best Practices
Text Color Best Practices
- ✅ Use consistent color meanings throughout your site
- ✅ Ensure sufficient contrast for readability
- ✅ Use semantic colors (success for positive, danger for errors)
- ✅ Combine with icons for colorblind users
- ✅ Use muted colors for less important information
- ✅ Test colors on different devices and screens
- ✅ Consider dark mode compatibility
