Blogs Web Bootstrap 5 Colors

Contextual Colors

By Tim-Bo Tolbert, posted on Jun 10, 2022

In this blog post I am referring to the Contextual Colors that are available with Bootstrap version 5. Bootstrap 5 provides easy-to-use standardized names for Contextual Colors which can be used to assist in maintaining some site uniformity and consistency.

The table below lists and demonstrates each of the classes for text colors. The background color of the table has been adjusted to allow you to visually see the lighter/white text's, because otherwise the white text on a white background simply do not display (as is evident in the Results Example shown at the bottom of this page):

Class	Example
`.text-muted`	This text is muted.
`.text-primary`	This text is important.
`.text-success`	This text indicates success.
`.text-info`	This text represents some information.
`.text-warning`	This text represents a warning.
`.text-danger`	This text represents danger.
`.text-secondary`	Secondary text.
`.text-light`	This text is light grey.
`.text-dark`	This text is dark grey.
`.text-white`	This text is white.
`.text-body`	Default body color (often black)

Code Example:

The following HTML code example demonstrates how to use these contextual color classes to change the color value of Text:

Bootstrap5

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 5 Color Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
  <h2>Contextual Colors</h2>
  <p>Use the contextual classes to provide "meaning through colors":</p>
  <p class="text-muted">This text is muted.</p>
  <p class="text-primary">This text is important.</p>
  <p class="text-success">This text indicates success.</p>
  <p class="text-info">This text represents some information.</p>
  <p class="text-warning">This text represents a warning.</p>
  <p class="text-danger">This text represents danger.</p>
  <p class="text-secondary">Secondary text.</p>
  <p class="text-light">This text is light grey (on white background).</p>
  <p class="text-dark">This text is dark grey.</p>
  <p class="text-white">This text is white (on white background).</p>
  <p class="text-body">Default body color (often black).</p>
</div>
</body>
</html>

Results Example:

Use the contextual classes to provide "meaning through colors":

This text is muted.

This text is important.

This text indicates success.

This text represents some information.

This text represents a warning.

This text represents danger.

Secondary text.

This text is light grey (on white background).

This text is dark grey.

This text is white (on white background).

Default body color (often black).

Final Thoughts

Thank you for reading, I hope you found this blog post (tutorial) educational and helpful.

	(0)
	(0)