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.

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.

At Online Learner, we're on a mission to ignite a passion for learning and empower individuals to reach their full potential. Founded by a team of dedicated educators and industry experts, our platform is designed to provide accessible and engaging educational resources for learners of all ages and backgrounds.

Disclaimer About Us