Bootstrap provides text and background color utilities based on the theme colors:
<!-- Text colors -->
<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>
<!-- Background colors -->
<div class="bg-primary text-white">Primary background</div>
<div class="bg-light text-dark">Light background</div>
<!-- Contextual colors -->
<span class="badge bg-warning text-dark">Warning badge</span>
Available colors: primary, secondary, success, danger, warning, info, light, dark, body, muted, white, black-50, white-50.
Rewriting in plainer words…
This answer doesn't lend itself to a diagram - it reads best . No credits were charged.
The model's verdict: “”
The interactive diagram is below the answer - jump to diagram ↓
This answer is explained by a shared concept diagram - open →
Tailored explanation · switch back to · ·
Point the redraw: