Bootstrap Text Colors
Color helps you communicate meaning. A red message can signal danger, while a green one can signal success. Bootstrap 5 provides a set of contextual text color classes that let you change the color of any text instantly. In this lesson you will learn every text color class, how to use text colors on colored backgrounds, and how to control transparency with the newer opacity helpers.
The Text Color Classes
Bootstrap text color classes all start with .text- followed by a color name. Each color maps to a meaning, which Bootstrap calls a 'contextual' color. For example .text-danger is red and suggests something went wrong, while .text-success is green and suggests everything is fine.
Contextual text colors
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<p class="text-primary">This text is primary (blue)</p>
<p class="text-success">This text is success (green)</p>
<p class="text-danger">This text is danger (red)</p>
<p class="text-warning">This text is warning (yellow)</p>
<p class="text-muted">This text is muted (grey)</p>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>Text Colors on Dark Backgrounds
Some colors are hard to read on a white page. Bootstrap includes .text-white and .text-dark for these situations. Light text like .text-white is meant to sit on top of a dark background so it stays readable. You will often combine a text color class with a background color class.
Light text on a dark background
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="bg-dark p-3">
<p class="text-white">White text is easy to read on a dark box.</p>
<p class="text-warning">Warning text also works well here.</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>Text Opacity
Bootstrap 5 introduced text opacity utilities that let you make text partly transparent. Add a class like .text-opacity-75 alongside a text color to soften it. The available steps are 25, 50, 75, and 100 percent.
Adjusting text opacity
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<p class="text-primary">Full opacity primary text</p>
<p class="text-primary text-opacity-75">75% opacity</p>
<p class="text-primary text-opacity-50">50% opacity</p>
<p class="text-primary text-opacity-25">25% opacity</p>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>Links and Body Colors
The color classes also work on links, though the link will keep its underline. Bootstrap also offers .text-body for the default body text color and .text-body-secondary for a softer variant, which are useful when you want text to match the theme automatically.
- Use .text-primary, .text-success, and friends to give text meaning through color.
- Combine a text color with a background color for readable colored boxes.
- Use .text-opacity-25 through .text-opacity-100 to fade text.
- Prefer .text-body for normal text so it adapts to light and dark themes.
