BootstrapHow-ToBeginner · 4 min read

How to Use Contextual Colors in Bootstrap for Stylish UI

Bootstrap provides predefined contextual color classes like text-primary, bg-success, and alert-danger to style elements with consistent colors. Use these classes by adding them to your HTML elements to quickly apply colors that match Bootstrap's theme.

📐

Syntax

Bootstrap uses simple class names to apply contextual colors. These classes usually start with text- for text colors, bg- for background colors, and specific component classes like alert- for alerts.

text-primary: colors text with the primary theme color.
bg-success: colors background with the success theme color.
alert-danger: styles alert boxes with the danger color.

html

<!-- Text color -->
<span class="text-primary">Primary text</span>

<!-- Background color -->
<div class="bg-success text-white p-2">Success background</div>

<!-- Alert with contextual color -->
<div class="alert alert-danger" role="alert">Danger alert</div>

Output

Primary text (blue color) Success background (green background with white text) Danger alert (red alert box with white text)

💻

Example

This example shows how to use Bootstrap's contextual color classes to style text, backgrounds, and alerts. It demonstrates the visual difference each class creates.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap Contextual Colors Example</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body class="p-4">
  <h2>Contextual Text Colors</h2>
  <p class="text-primary">This text is primary color.</p>
  <p class="text-success">This text is success color.</p>
  <p class="text-danger">This text is danger color.</p>

  <h2>Contextual Background Colors</h2>
  <div class="bg-primary text-white p-3 mb-2">Primary background</div>
  <div class="bg-warning text-dark p-3 mb-2">Warning background</div>
  <div class="bg-info text-white p-3 mb-2">Info background</div>

  <h2>Contextual Alerts</h2>
  <div class="alert alert-primary" role="alert">Primary alert message.</div>
  <div class="alert alert-warning" role="alert">Warning alert message.</div>
  <div class="alert alert-danger" role="alert">Danger alert message.</div>
</body>
</html>

Output

Page showing colored text paragraphs in blue, green, red; colored background blocks in blue, yellow, light blue; and alert boxes in blue, yellow, red with appropriate text colors.

⚠️

Common Pitfalls

Common mistakes when using Bootstrap contextual colors include:

Forgetting to add text-white or a contrasting text color when using dark background classes, making text hard to read.
Using contextual classes on elements that do not support them, like applying alert- classes outside alert components.
Mixing multiple conflicting color classes on the same element, which can cause unexpected styles.

html

<!-- Wrong: dark background with no text color -->
<div class="bg-primary p-3">Unreadable text</div>

<!-- Right: add text-white for contrast -->
<div class="bg-primary text-white p-3">Readable text</div>

Output

First box: blue background with default dark text (hard to read) Second box: blue background with white text (easy to read)

📊

Quick Reference

Class Prefix	Purpose	Example
text-	Change text color	text-success
bg-	Change background color	bg-danger
alert alert-	Alert box color	alert alert-warning
btn btn-	Button color	btn btn-primary

✅

Key Takeaways

Use text- classes to color text and bg- classes for backgrounds in Bootstrap.

Always add a contrasting text color like text-white when using dark background colors.

Contextual classes like alert- are designed for specific components and should be used accordingly.

Avoid mixing multiple color classes on the same element to prevent style conflicts.

Bootstrap's contextual colors help keep your UI consistent and visually clear with minimal effort.