What is Color utilities (text, background) in Bootsrap?

Bootsrapmarkup~5 mins

Color utilities (text, background) in Bootsrap

Choose your learning style9 modes available

Learn Why Deep Render Try Challenge Project Recall Perf

Introduction

Color utilities help you quickly change text and background colors without writing custom CSS. They make your website look nice and clear.

You want to highlight important text in red to show an error.

You need to change the background color of a button to match your brand.

You want to make some text stand out with a different color on a card.

You want to quickly set a light background behind a paragraph for contrast.

You want to use consistent colors across your site using Bootstrap's predefined classes.

Syntax

Bootsrap

text-{color}
bg-{color}

Replace {color} with Bootstrap color names like primary, success, danger, warning, info, light, dark, or white.

Use text- classes to change text color and bg- classes to change background color.

Examples

This makes the text color blue using Bootstrap's primary color.

Bootsrap

<p class="text-primary">This text is blue.</p>

This sets a green background and white text with some padding.

Bootsrap

<div class="bg-success text-white p-3">Green background with white text.</div>

This colors the text red to show a warning.

Bootsrap

<span class="text-danger">Warning message in red.</span>

This uses a light background and dark text for easy reading.

Bootsrap

<section class="bg-light text-dark p-4">Light background with dark text.</section>

Sample Program

This example shows different Bootstrap color utility classes applied to text and backgrounds. It uses text-primary for blue text, text-success for green text, bg-warning for a yellow background, bg-danger for a red button background, and bg-info for a light blue section background with white text. Padding and margin classes add spacing.

Bootsrap

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Bootstrap Color Utilities Example</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
  <main class="container my-5">
    <h1 class="text-primary">Hello, Bootstrap Colors!</h1>
    <p class="text-success">This text is green to show success.</p>
    <div class="bg-warning text-dark p-3 mb-3">Warning background with dark text.</div>
    <button class="btn bg-danger text-white">Danger Button</button>
    <section class="bg-info text-white p-4 mt-4 rounded">
      <p>This section has an info background and white text.</p>
    </section>
  </main>
</body>
</html>

OutputSuccess

Important Notes

Bootstrap color utilities are responsive and accessible by default.

Use padding (p-*) and margin (m-*) classes to add space around colored elements.

For better accessibility, ensure sufficient contrast between text and background colors.

Summary

Use text-{color} to change text color quickly.

Use bg-{color} to change background color easily.

Bootstrap provides many color options to keep your design consistent and simple.