You currently have JavaScript disabled on your browser.

This website uses JavaScript, and This page needs JavaScript activated to work correctly.

Please active JavaScript on your browser and then refresh this page.

Contextual Colors



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):

ClassExample
.text-muted
.text-primary
.text-success
.text-info
.text-warning
.text-danger
.text-secondary
.text-light
.text-dark
.text-white
.text-body

Code Example:

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

 
<!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.


grayStargrayStargrayStargrayStargrayStar  Be the first to rate this post

User Comments






TJDivisions© 2022