Bootstrap Colors: A Practical Guide

This guide explains how Bootstrap’s color system works, how to apply it to text, backgrounds, buttons, and other components, and how to customize it for your own projects. You’ll learn the difference between theme colors, contextual colors, and utility classes, and how to use them consistently without breaking accessibility.

What Are Bootstrap Colors?

Bootstrap provides a set of predefined color classes that you can apply directly in your HTML. These colors are defined as Sass variables and CSS custom properties, and they cover everything from primary actions to success, warning, and danger states. The default palette includes:

• Primary – blue (#0d6efd), used for main actions and links
• Secondary – gray (#6c757d), for less prominent buttons and elements
• Success – green (#198754), for positive confirmations
• Danger – red (#dc3545), for errors or destructive actions
• Warning – yellow (#ffc107), for cautions (often paired with dark text)
• Info – cyan (#0dcaf0), for neutral informative messages
• Light – near-white (#f8f9fa), for subtle backgrounds
• Dark – near-black (#212529), for strong contrast

These are called theme colors. Bootstrap also includes gray colors (from gray-100 to gray-900) and contextual colors like text-muted or bg-white.

How to Apply Bootstrap Colors

You apply colors with utility classes that follow a simple pattern: text-{color} for text, bg-{color} for background, and border-{color} for borders. For example:

<div class="text-primary">Primary text</div>
<div class="bg-success">Green background</div>
<button class="btn btn-danger">Delete</button>

Buttons, alerts, badges, and other components also have their own color variants. For instance, btn-primary, alert-warning, and badge-info all use the same theme colors. You can also use text-bg-{color} (Bootstrap 5.2+) to set both text and background together, which automatically adjusts the text color for contrast.

Choosing the Right Color

Pick colors based on meaning, not just aesthetics. Use success for positive feedback, danger for errors or irreversible actions, warning for caution (always pair with dark text like text-dark), and info for neutral updates. For primary actions, use primary; for secondary actions, use secondary or an outline button.

For text, ensure sufficient contrast with the background. Bootstrap’s default colors meet WCAG AA contrast when used on white, but if you combine a light background with light text, contrast fails. For example, text-warning on white is unreadable; use text-warning with a dark background or add text-dark on a yellow background.

Customizing Bootstrap Colors

To change the palette, you need to override the Sass variables before importing Bootstrap. In your own scss file, set new values for $primary, $success, etc., then import Bootstrap. For example:

// custom.scss
$primary: #ff6600;
@import "bootstrap/scss/bootstrap";

This recompiles all components that use $primary (buttons, links, alerts, etc.) with your new color. If you use the compiled CSS file instead, you can override the CSS custom properties (in Bootstrap 5.2+) like this:

:root {
  --bs-primary: #ff6600;
  --bs-primary-rgb: 255, 102, 0;
}

But note: this only changes the utility classes that reference the variable; some component styles (like button hover) may still use the old RGB values. For full control, use the Sass approach.

Common Mistakes and Pitfalls

• Using text-muted on dark backgrounds – it becomes unreadable. Use text-white-50 or text-secondary instead.
• Overriding a color in CSS without updating its RGB companion – many utilities use rgba() for hover states; if you only change the hex, hover effects may look wrong.
• Forgetting that bg-* does not change text color – a green background with default black text may have poor contrast; use text-bg-success or add a text color.
• Using text-white on a light background – always check contrast.

Bootstrap Colors vs. CSS Variables

Bootstrap 5 introduced CSS custom properties (like --bs-primary) that you can use in your own CSS. This makes it easier to theme at runtime without recompiling. However, the Sass variables are still the source of truth when building with the source files. If you’re using the precompiled CSS, you can still change the custom properties, but be aware that some component styles (like button borders on hover) may not update perfectly because they use the RGB variables.

Accessibility and Contrast

Always test text contrast. Bootstrap’s default colors are designed to meet AA standards on white, but when you combine colors (e.g., bg-warning with text-white), contrast fails. Use the text-bg-* classes (Bootstrap 5.2+) that automatically choose black or white text based on the background luminance. For custom colors, use a contrast checker and adjust the color or add a text shadow.

Frequently Asked Questions

How do I use a custom color like purple in Bootstrap?

You can add your own utility classes, but the simplest way is to override a theme color (e.g., set $primary to purple) or add a new Sass variable and generate utilities with text-bg-purple if you’re using the source. If you’re using precompiled CSS, you can add your own classes like .text-purple { color: #800080; }.

Why does my button hover color look wrong after I change the primary color?

Because Bootstrap’s button hover uses the RGB version of the color with an opacity overlay. If you only change the hex variable, the RGB variable stays the old value. Update both --bs-primary and --bs-primary-rgb (or recompile with Sass) to fix it.

Can I use Bootstrap colors in a non-Bootstrap project?

Yes. You can copy the color values (e.g., #0d6efd) into your own CSS. But the utility classes themselves are part of Bootstrap, so you’d need to include Bootstrap or write your own classes.

What is the difference between text-secondary and text-muted?

text-secondary uses the secondary theme color (#6c757d), while text-muted is a separate utility that uses $text-muted (usually #6c757d as well, but it’s a different variable). In practice they look the same in the default theme, but you can customize them independently.

How do I make a button with a transparent or outline color?

Use btn-outline-{color} for a button with a colored border and transparent background. For example, btn-outline-primary gives a blue border that fills on hover.

Does Bootstrap 4 have the same color classes?

Mostly yes, but Bootstrap 4 uses slightly different hex values (e.g., primary was #007bff) and lacks the text-bg-* classes. The utility syntax (text-*, bg-*) is the same.

Related

• Keynote Keyboard Shortcuts: Full Guide
• Why Warm Water Fish Appear in Colder Coastal Waters
• National Pokemon Day: Date, Origins, and How to Celebrate