Bootstrap 5 Colors

Bootstrap 5 offers a wide range of color utilities that allow you to style text, backgrounds, borders, and components. These colors are consistent across components, ensuring a uniform look throughout your site.

• Text Colors
• Background Colors
• Background color with contrasting text
• Border Colors

Text Color:

• You can apply text color with these classes:.text-primary, .text-secondary, .text-success, .text-danger, .text-warning, .text-info, .text-light, .text-dark, .text-muted, .text-white

Background Colors

    Background color utilities help you style backgrounds using the same color scheme.

• Primary Colors: bg-primary, bg-secondary, bg-success, bg-danger, bg-warning, bg-info, bg-light, bg-dark, and bg-white.

Background Color with Contrasting text color

    These classes combine both text color and background color to ensure better readability and contrast, making it easy to style text without need to separate text and background classes

• Primary Colors: text-bg-primary, text-bg-secondary, text-bg-success, text-bg-danger, text-bg-warning, text-bg-info, text-bg-light, text-bg-dark, and text-bg-white.

Border color:

    These classes allow you to add colored borders to any element with minimal code

• Primary Colors: border-primary, border-secondary, border-success, border-danger, border-warning, border-info, border-light, border-dark, and border-white.