Color System in Bootstrap
From the Bootstrap 5 cheat sheet · Colors & Backgrounds · verified Jul 2026
Color System
Bootstrap color palette and utilities
html
<!-- Text Colors -->
<p class="text-primary">Primary</p>
<p class="text-secondary">Secondary</p>
<p class="text-success">Success</p>
<p class="text-danger">Danger</p>
<p class="text-warning">Warning</p>
<p class="text-info">Info</p>
<!-- Background Colors -->
<div class="bg-primary text-white">Primary background</div>
<div class="bg-secondary text-white">Secondary</div>
<div class="bg-success text-white">Success</div>
<div class="bg-danger text-white">Danger</div>
<div class="bg-warning">Warning</div>
<div class="bg-info">Info</div>💡 Use -subtle variants for softer background colors
⚡ Combine bg-gradient with bg-* for gradient backgrounds
📌 -emphasis variants provide stronger color contrast
🔥 Opacity utilities work with both text and backgrounds