Colors and Utilities
4 min read Quiz at the end
Style backgrounds and text with bg-primary, text-success, bg-opacity-25, and color utilities.
Color System and Utilities
<!-- Background colors -->
<div class="bg-primary text-white">Primary</div>
<div class="bg-secondary">Secondary</div>
<div class="bg-success">Success</div>
<div class="bg-danger">Danger</div>
<div class="bg-warning">Warning</div>
<div class="bg-info">Info</div>
<div class="bg-light">Light</div>
<div class="bg-dark text-white">Dark</div>
<!-- Text colors -->
<span class="text-primary"></span>
<span class="text-danger"></span>
<span class="text-success"></span>
<span class="text-muted"></span>
<!-- Opacity -->
<div class="bg-primary bg-opacity-25">Light blue</div>
<div class="text-danger text-opacity-50">Semi-transparent</div>
Topic Quiz · 2 questions
Test your understanding before moving on
1. What does bg-primary apply?
💡 bg-primary sets the background to the primary theme color.
2. What does text-danger style text as?
💡 text-danger applies Bootstrap danger color (red) for errors and warnings.