In Bootstrap 5 (BS5), the color system provides a wide range of utility classes for text, backgrounds, borders, and more. These classes are based on Bootstrap’s theme color palette and make it easy to apply consistent styles across your UI.

? Theme Colors

These are the standard Bootstrap 5 color names:

?? Text Color Classes

<p class="text-primary">Primary text</p><p class="text-danger">Danger text</p>

Classes:

• text-primary, text-secondary, text-success, text-danger, etc.

• text-white, text-black, text-muted

• text-reset: Resets inherited text color

• text-body: Default body text color

? Background Color Classes

<div class="bg-warning text-dark p-3">Warning background</div>

Classes:

• bg-primary, bg-success, bg-danger, etc.

• Combine with text-* to control readability (e.g., text-light or text-dark)

? Border Color Classes

<div class="border border-success p-2">Success border</div>

Use:

• border

• border-[color] (e.g., border-danger, border-info)

? Opacity and Emphasis Utilities

<p class="text-primary text-opacity-75">75% opaque primary text</p><div class="bg-success bg-opacity-50">50% opaque background</div>

Classes:

• text-opacity-[0–100]

• bg-opacity-[0–100]

?? Utility Overview

Would you like a custom theme color example, or info on how to extend colors using SCSS?