Text Utilities: Text colors

In Bootstrap 4, text colors are managed using a set of predefined classes that apply specific colors to text elements. These classes help to standardize and simplify the process of applying colors, ensuring consistency across your web pages.

Bootstrap 4 Text Color Classes

Text Color Classes

Bootstrap 4 provides a variety of text color classes, each of which corresponds to a different color. Here are the primary text color classes available:

.text-primary: Applies the primary color.
.text-secondary: Applies the secondary color.
.text-success: Applies the success color (usually green).
.text-danger: Applies the danger color (usually red).
.text-warning: Applies the warning color (usually yellow).
.text-info: Applies the info color (usually light blue).
.text-light: Applies a light color (usually white, used on dark backgrounds).
.text-dark: Applies a dark color (usually black or dark gray).
.text-body: Applies the default body color.
.text-muted: Applies a muted (light gray) color.
.text-white: Applies white color.

Examples

Here are some examples of how to use these text color classes in your HTML:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bootstrap 4 Text Colors</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>

  <div class="container mt-5">
    <p class="text-primary">This text is primary color.</p>
    <p class="text-secondary">This text is secondary color.</p>
    <p class="text-success">This text is success color.</p>
    <p class="text-danger">This text is danger color.</p>
    <p class="text-warning">This text is warning color.</p>
    <p class="text-info">This text is info color.</p>
    <p class="text-light bg-dark">This text is light color (on dark background).</p>
    <p class="text-dark">This text is dark color.</p>
    <p class="text-body">This text is body color.</p>
    <p class="text-muted">This text is muted color.</p>
    <p class="text-white bg-dark">This text is white color (on dark background).</p>
  </div>

</body>
</html>

Explanation

Primary Color (.text-primary): Typically used for the main accent color of your theme.
Secondary Color (.text-secondary): Used for secondary elements that need a different color.
Success Color (.text-success): Often used to indicate successful actions or positive feedback.
Danger Color (.text-danger): Used to indicate errors, warnings, or critical actions.
Warning Color (.text-warning): Used for warning messages or cautionary notes.
Info Color (.text-info): Used for informational messages or less critical actions.
Light Color (.text-light): Best used on dark backgrounds to ensure readability.
Dark Color (.text-dark): Typically used for main text or headings.
Body Color (.text-body): Uses the default text color for the body.
Muted Color (.text-muted): Used for less important text that should not stand out.
White Color (.text-white): Best used on dark backgrounds to ensure readability.

By using these predefined classes, you can ensure that your text colors are consistent with the overall design of your Bootstrap-based project.

0 likes

Your Feedback

Help us improve by sharing your thoughts

Previous: Text Alignment

Next: Backgrounds

Online Learner helps developers master programming, database concepts, interview preparation, and real-world implementation through structured learning paths.