Text colors
Text colour utilities apply Bootstrap's theme colours to text.
In this page:
Syntax
<p class="text-primary">text</p>
<p class="text-danger">text</p>Text colors
Classes like .text-primary, .text-success, .text-danger and .text-warning colour text using the theme. .text-body-secondary and .text-body-emphasis adapt to light and dark modes. Use .text-bg-* to pair a background with an accessible text colour.
Note:
Colour alone should not carry meaning; add text or icons too.
Example: 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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body class="p-3">
<div class="container">
<p class="text-primary">Primary</p>
<p class="text-success">Success</p>
<p class="text-danger">Danger</p>
<p class="text-warning-emphasis bg-warning-subtle p-1">Warning emphasis on subtle background</p>
<p class="text-body-secondary">Secondary body text</p>
<span class="badge text-bg-dark">text-bg-dark</span>
</div>
</body>
</html>Live Example
Related Topics
Common Mistakes
- Relying only on colour to convey state
- Using low contrast combinations
- Using text-muted in version 5.3 instead of text-body-secondary
Chapter Summary
- text-primary, success, danger, warning
- text-body-secondary adapts to dark mode
- text-bg-* pairs colours
- Do not rely on colour alone
🔒
Chapter Quiz — Complete all 7 topics to unlock
0/7 topics done
Complete these topics first: