Bootstrap Colors & Backgrounds — Contextual and Utility Classes

In this tutorial, you will learn about Bootstrap Colors & Backgrounds. We cover key concepts, practical examples, and best practices to help you master this topic.

Bootstrap's color system uses semantic color names for text, background, and border utilities, supporting primary, secondary, success, danger, warning, info, light, and dark themes.

What You'll Learn

You will learn how to use Bootstrap's contextual color classes for text and backgrounds, understand the color palette, apply opacity modifiers, and customize colors.

Why It Matters

Consistent colors reinforce brand identity. DodaTech's tools use a custom purple-primary scheme derived from Bootstrap's color system, applied to buttons, alerts, badges, and navigation.

Real-World Use

Durga Antivirus Pro's dashboard uses bg-danger for threat alerts, bg-success for safe status, and bg-warning for warnings — all from Bootstrap's semantic palette.

flowchart LR
    A[Typography] --> B[Colors & Backgrounds]
    B --> C[Text Colors]
    B --> D[Background Colors]
    B --> E[Opacity]
    C --> F[Semantic Usage]
    D --> F
    style B fill:#7952b3,stroke:#563d7c,color:#fff
    style F fill:#22c55e,stroke:#16a34a,color:#fff

Text Colors

Bootstrap provides eight contextual text color classes:

<p class="text-primary">Primary text (brand blue)</p>
<p class="text-secondary">Secondary text (gray)</p>
<p class="text-success">Success text (green)</p>
<p class="text-danger">Danger text (red)</p>
<p class="text-warning bg-dark">Warning text (yellow)</p>
<p class="text-info bg-dark">Info text (light blue)</p>
<p class="text-light bg-dark">Light text (white)</p>
<p class="text-dark">Dark text (near black)</p>
<p class="text-body">Body text (default gray)</p>
<p class="text-muted">Muted text (lighter gray)</p>

Expected output: Ten lines of text in different colors matching Bootstrap's semantic palette.

Background Colors

Background utilities use the bg-* pattern:

<div class="p-3 mb-2 bg-primary text-white">Primary background</div>
<div class="p-3 mb-2 bg-secondary text-white">Secondary background</div>
<div class="p-3 mb-2 bg-success text-white">Success background</div>
<div class="p-3 mb-2 bg-danger text-white">Danger background</div>
<div class="p-3 mb-2 bg-warning text-dark">Warning background</div>
<div class="p-3 mb-2 bg-info text-dark">Info background</div>
<div class="p-3 mb-2 bg-light text-dark">Light background</div>
<div class="p-3 mb-2 bg-dark text-white">Dark background</div>

Expected output: Eight colored boxes with contrasting text, demonstrating each background color.

Background Gradient

Add .bg-gradient to any background for a subtle gradient:

<div class="p-3 mb-2 bg-primary bg-gradient text-white">
  Primary with gradient
</div>
<div class="p-3 mb-2 bg-success bg-gradient text-white">
  Success with gradient
</div>

Expected output: Two boxes with slight gradient overlays on the background colors.

Note that .bg-gradient applies a linear gradient from top to bottom using the background color. It works with all bg-* classes.

Opacity Modifiers

Text and background colors support opacity from 25% to 100%:

<p class="text-primary">100% opacity</p>
<p class="text-primary text-opacity-75">75% opacity</p>
<p class="text-primary text-opacity-50">50% opacity</p>
<p class="text-primary text-opacity-25">25% opacity</p>

<div class="bg-success p-3">
  <p class="text-white bg-success bg-opacity-75 p-2">75% background opacity</p>
</div>

Expected output: Four text lines with decreasing opacity and one box with 75% background opacity.

Border Colors

Borders can use the same semantic colors:

<div class="border border-primary p-3 mb-2">Primary border</div>
<div class="border border-success p-3 mb-2">Success border</div>
<div class="border border-danger p-3 mb-2">Danger border</div>
<div class="border border-warning p-3 mb-2">Warning border</div>

Expected output: Four boxes with different colored borders using semantic color classes.

Common Mistakes

1. Using Text Colors Without Background Contrast

Light text (text-white, text-light) on light backgrounds is unreadable. Always ensure sufficient contrast between text and background.

2. Overriding Bootstrap Colors Incorrectly

Customizing Bootstrap colors should be done via Sass variables or CSS custom properties, not by overwriting the .text-primary class directly.

3. Using Color Classes for Meaning Only

Color alone should not convey meaning. Always pair color with text labels or icons for Accessibility.

4. Forgetting the .bg-gradient Class Name

The gradient class is .bg-gradient not .gradient or .bg-grad. It must follow the bg-* class.

5. Applying Multiple Background Classes

You can only use one bg-* class per element. Overlapping background classes will not create blends.

Practice Questions

1. What Bootstrap class gives red danger text? .text-danger applies the red danger color to text.

2. How do you add a subtle gradient to a background? Add .bg-gradient after the bg-* class on the same element.

3. What is the difference between text-secondary and text-muted? text-secondary is the secondary brand color (gray-600). text-muted is a lighter gray (gray-500 or gray-600 depending on theme).

4. How do you reduce the opacity of a background color? Use .bg-opacity-75, .bg-opacity-50, or .bg-opacity-25 alongside the bg-* class.

5. Can you use color utilities on links? Yes. Link color classes like link-primary, link-success, etc. style anchor elements.

Challenge

Create a status dashboard with four cards: green for "All Systems Operational", yellow for "Degraded Performance", red for "Service Disruption", and gray for "Maintenance Mode". Use Bootstrap background and text color classes.

FAQ

Mini Project

Build a notification system UI with colored alert boxes for success (green), error (red), warning (yellow), and info (blue) messages. Use background, border, and text color classes.

What's Next

Master Margins and Padding with Bootstrap spacing utilities. Then explore Borders and Shadows for visual depth.