Bootstrap 5 offers contextual color classes that help convey meaning using different color styles.
Bootstrap provides several text color utility classes such as .text-muted, .text-primary, .text-success, .text-info, .text-warning, .text-danger, .text-secondary, .text-white, .text-dark, .text-body (typically the default body text color), and .text-light.
| Class | Description |
|---|---|
.text-muted |
Light gray color for less important text |
.text-primary |
Main theme color (usually blue) |
.text-success |
Indicates success or positive action (usually green) |
.text-info |
Used for informational messages (usually light blue) |
.text-warning |
Shows warning or caution text (usually orange/yellow) |
.text-danger |
Indicates error, danger, or alert (usually red) |
.text-secondary |
Used for secondary/less important text (usually gray) |
.text-white |
Sets text color to white (use on dark backgrounds) |
.text-dark |
Dark text, typically used on light backgrounds |
.text-body |
Default text color of the document (often black) |
.text-light |
Very light text, suitable for dark backgrounds |
You can apply 50% transparency to black or white text by using the .text-black-50 or .text-white-50 classes.