Prev Next

BS5 Text Colors

Bootstrap 5 provides numerous text color utilities that help you quickly style text without writing custom CSS. Learn how to apply these classes for consistent, responsive color schemes.

Key Topics

Built-in Color Classes

Bootstrap offers text color classes named after its color palette, such as .text-primary, .text-danger, .text-success, and others.

<p class="text-primary">This text is primary-colored</p>
<p class="text-danger">This text is red/danger</p>
<p class="text-success">This text is green/success</p>

Explanation: Use these classes to quickly change the font color across your page. The colors adapt to Bootstrap's theme or your custom variables.

Utility Classes for Text

In addition to preset colors, Bootstrap 5 offers utility classes like .text-opacity-75 or .text-black-50 for fine-tuning text appearance.

<p class="text-black-50">Faded black text (50% opacity).</p>
<p class="text-danger text-opacity-75">Danger text at 75% opacity</p>

Explanation: These utility classes let you adjust color opacity or use partial tints/shades of existing theme colors.

Colored Text Demo

Below is a complete HTML example demonstrating different text color classes within one page.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Colored Text Demo</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container py-4">
        <h1 class="text-primary">Primary Heading</h1>
        <p class="text-success">This paragraph is styled with .text-success.</p>
        <p class="text-danger">Error messages or important warnings often use .text-danger.</p>
        <p class="text-black-50">Use .text-black-50 for a subtle, muted look.</p>
        <p class="text-warning text-opacity-75">.text-warning with 75% opacity for a softer yellow.</p>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Explanation: This example demonstrates various color classes in action, showcasing how easy it is to change text colors using Bootstrap utilities.

Key Takeaways

  • .text-[color] classes offer quick color changes matching Bootstrap's theme palette.
  • Use .text-black-50 or .text-opacity-* classes for subtle or semi-transparent text effects.
  • Combine color utilities for consistent branding and quick UI adjustments.
Prev Next