No More Confusion! Complete Cheat Sheet for Bootstrap 5 Color Classes

Bootstrap 5 Color Classes Complete Guide

Bootstrap 5 is one of the most popular CSS frameworks for web development. Among its many features, color utility classes are key to dramatically changing the look and feel of your design. However, with so many class names like text-primary and bg-warning, it’s easy to get overwhelmed or confused about which to use.

This page provides a clear and concise explanation of how Bootstrap 5’s color system works, when to use each class, and tips for choosing the right one.

You can check all major utility classes for backgrounds, text colors, borders, buttons, and more in one place.

🎨 Bootstrap 5 Color Cheat Sheet

✅ Basic Color Palette

Color Name	Hex Code	Description
`primary`	#0d6efd	Main accent color
`secondary`	#6c757d	Secondary gray tone
`success`	#198754	Success/confirmation color
`danger`	#dc3545	Error/danger color
`warning`	#ffc107	Warning/alert color
`info`	#0dcaf0	Informational highlight
`light`	#f8f9fa	Light background
`dark`	#212529	Dark background
`white`	#ffffff	White background or text
`black`	#000000	Black background or text

🖌️ Background Color Classes

Class Name	Description
`bg-primary`	Primary background
`bg-secondary`	Secondary background
`bg-success`	Success notification background
`bg-danger`	Error background
`bg-warning`	Warning background (yellow)
`bg-info`	Informational background (blue)
`bg-light`	Light background
`bg-dark`	Dark background
`bg-white`	White background
`bg-transparent`	Transparent background

✍️ Text Color Classes

Class Name	Description
`text-primary`	Primary text color
`text-success`	Success notification text
`text-danger`	Error text
`text-warning`	Warning text
`text-info`	Informational text
`text-light`	Light text (for dark backgrounds)
`text-dark`	Dark text (for light backgrounds)
`text-muted`	Muted (gray) text
`text-white`	White text
`text-black-50`	50% black
`text-white-50`	50% white

🧱 Border Color Classes

Class Name	Description
`border`	Default border
`border-primary`	Primary border
`border-success`	Success border
`border-danger`	Error border
`border-warning`	Warning border
`border-info`	Informational border
`border-dark`	Dark border
`border-light`	Light border

🧵 Button Color Classes

Class Name	Description
`btn-primary`	Primary button
`btn-secondary`	Secondary button
`btn-success`	Success button
`btn-danger`	Error button
`btn-warning`	Warning button
`btn-info`	Info button
`btn-light`	Light button
`btn-dark`	Dark button
`btn-outline-*`	Outline style buttons (e.g., `btn-outline-danger`)

💡 Additional Notes

To create opacity variants like -50, -75, etc., use Bootstrap’s custom CSS utilities.
Bootstrap color utilities can be customized using SCSS variables.

100%	75%	50%	25%
primary
success
danger
warning
light
info

📄 Sample Code

Primary background with white text

This is muted (gray) text.