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.

adThumb

Number Search Volume 5

$7.99      buyNow
Over 150 fun family friendly challenging number search puzzles (with answer sheets). This volume focuses on random number words between 50000 thru 59999. Minimum of 40 number words per puzzle. Each puzzle is on its own page, which not only reduces crowding but also allows for larger word print sizes for easier reading. Answer sheets for each puzzle are provided in the back of the book. Fun for yourself and for the entire family. This makes for a great gift idea as well.

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© 2023