BootstrapHow-ToBeginner · 3 min read

How to Use Text Colors in Bootstrap: Simple Guide

In Bootstrap, you can change text colors by adding text- utility classes like text-primary, text-success, or text-danger to your HTML elements. These classes apply predefined colors that match Bootstrap's theme and ensure consistent styling.

📐

Syntax

Bootstrap uses utility classes with the pattern text-{color} to apply text colors. Replace {color} with color names like primary, secondary, success, danger, warning, info, light, or dark.

Example: class="text-primary" applies the primary theme color to the text.

html

<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>

Output

Three paragraphs with text colored blue (primary), green (success), and red (danger) respectively.

💻

Example

This example shows how to use different Bootstrap text color classes on paragraphs.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap Text Colors Example</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container mt-4">
    <p class="text-primary">This text uses the primary color.</p>
    <p class="text-secondary">This text uses the secondary color.</p>
    <p class="text-success">This text uses the success color.</p>
    <p class="text-danger">This text uses the danger color.</p>
    <p class="text-warning">This text uses the warning color.</p>
    <p class="text-info">This text uses the info color.</p>
    <p class="text-light bg-dark">This text uses the light color on dark background.</p>
    <p class="text-dark">This text uses the dark color.</p>
  </div>
</body>
</html>

Output

A webpage showing eight paragraphs each with different Bootstrap text colors: blue, gray, green, red, yellow, teal, light on dark background, and black.

⚠️

Common Pitfalls

Not including Bootstrap CSS file will cause the classes to have no effect.
Using text-light on a light background makes text hard to read; use it on dark backgrounds instead.
Misspelling class names like text-primary will not apply any color.
Overriding Bootstrap styles with custom CSS without care can break the colors.

html

<!-- Wrong: text-light on white background -->
<p class="text-light">This text is hard to see on white background.</p>

<!-- Right: text-light on dark background -->
<p class="text-light bg-dark">This text is visible on dark background.</p>

Output

First paragraph text is nearly invisible on white background; second paragraph text is clearly visible white text on black background.

📊

Quick Reference

Class	Description
text-primary	Applies primary theme color (usually blue)
text-secondary	Applies secondary color (gray)
text-success	Applies green color for success messages
text-danger	Applies red color for errors or warnings
text-warning	Applies yellow color for warnings
text-info	Applies teal color for informational text
text-light	Applies light color, best on dark backgrounds
text-dark	Applies dark color, usually black or near black

✅

Key Takeaways

Use Bootstrap's text color classes like text-primary or text-danger to style text easily.

Always include Bootstrap CSS for the classes to work.

Use text-light only on dark backgrounds for good readability.

Check class spelling carefully to avoid styling issues.

Combine text color classes with background colors for best contrast.