Systems & Emerging Technologies Librarian
Cornette Library
WTAMU Box 60748
Canyon, TX 79016
Authored by
Robert "Bob" Smith
Bob originally created this guide. The goal was to assist librarians in utilizing Bootstrap within LibGuides.
As of Feb. 2nd, 2024, Bob has left the employ of West Texas A&M University.
Introduction
Helper Classes, Labels, and default styling on HTML elements will help you point or call out important information, mainly by the use of color. I will also discuss the sr-only class and the <code> element
Font Colors
Font-color classes within Bootstrap will allow you to use stock font-colors without needing to add your own style tags. While I haven't found a need for using different colored font in the presentation of information, I'm including them here in case you find the need.
Note: Most of these are Fully WCAG 2.0 AA compliant in terms of contrast. For making them all fully AA or AAA accessible, please see the second chart in this section.
Font-color Classes and Examples
| Background Class | Code | Color Hex | Current WCAG 2.0 Compliance |
|---|---|---|---|
text-muted grey text |
<p class="text-muted"></p> |
#777 | A |
text-primary dark blue text |
<p class="text-primary"></p> |
#337ab7 | AA |
text-info different blue text |
<p class="text-info"></p> |
#31708f | AA |
text-success light green text |
<p class="text-success"></p> |
#3c763d | AA |
text-warning yellowish-brown text |
<p class="text-warning"></p> |
#8a6d3b | AA |
text-danger light red text |
<p class="text-danger"></p> |
#a94442 | AA |
Accessibililty Fixes for Font-Colors
| Label | Fix to Full AA | Fix to Full AAA |
|---|---|---|
| Muted | .text-muted{color:#757575} | .text-muted{color:#595959} |
| Primary | N/A | .text-primary{color:#265A87} |
| Info | N/A | .text-info{color:#285C76} |
| Success | N/A | .text-success{color:#326232} |
| Warning | N/A | .text-warning{color:#68532C} |
| Danger | N/A | .text-danger{color:#933B39} |
Background Colors
Backgrounds allow you to call the user's attention to particular elements.
Note: Most of these are fully WCAG 2.0 AAA compliant in terms of contrast. The only background that is not fully AAA compliant is the bg-primary which can be fixed using the following CSS: .bg-primary{background-color:#265A87}.
Text-Background Classes and Examples
| Background Class | Code | BG Color | Current WCAG 2.0 Compliance |
|---|---|---|---|
|
Primary a Dark Blue |
<p class="bg-primary"></p> |
#337ab7 | AA |
|
Info a Light Blue |
<p class="bg-info"></p> |
#d9edf7 | AAA |
|
Success a light green |
<p class="bg-success"></p> |
#dff0d8 | AAA |
|
Warning a light yellor |
<p class="bg-warning"></p> |
#fcf8e3 | AAA |
|
Danger a light red |
<p class="bg-danger"></p> |
#f2dede | AAA |
Labels
Labels provide a great means to call the user's attention to something particular. In the table below, you will find the lables that are available in Bootstrap/LibGuides.
Note: Most of these are not fully WCAG 2.0 AA compliant in terms of contrast. For AA and AAA fixes, see the second table.
Label Classes and Examples
| Label Class | Code | BG Color | Current WCAG 2.0 Compliance |
|---|---|---|---|
| Default Label | <span class="label label-default"> |
#777 | A |
| Primary Label | <span class="label label-primary"> |
#337ab7 | AA |
| Info Label | <span class="label label-info"> |
#5bc0de | A |
| Success Label | <span class="label label-success"> |
#5cb85c | A |
| Warning Label | <span class="label label-warning"> |
#f0ad4e | A |
| Danger Label | <span class="label label-danger"> |
#d9534f | A |
Accessibililty Fixes for Labels
| Label | Fix to Full AA | Fix to Full AAA |
|---|---|---|
| Default | .label-default{background-color:#757575} | .label-default{background-color:#595959} |
| Primary | N/A | .label-primary{background-color:#265A87} |
| Info | .label-info{background-color:#20809D} | .label-info{background-color:#175D72} |
| Success | .label-success{background-color:#3A833A} | .label-success{background-color:#2C632C} |
| Warning | .label-warning{background-color:#A4660E} | .label-warning{background-color:#7B4C09} |
| Danger | .label-danger{background-color:#D4403A} | .label-danger{background-color:#A72925} |
Other Useful Helpers
Screen Reader Only Content
You can hide any content from sighted users but keep it readily available for screen readers by adding the class sr-only.
Code Tag Styling
As you've probably noticed through out this LibGuide, I've been placing certain HTML code into a special format. You do this by wrapping the code with <code></code>. However, for accessibility contrast purpose, you will want to add code{color:#9B1C3C} into your CSS.
Blockquote Element
When providing a long quote, you can wrap the quote within a <blockquote> element. Bootstrap automatically styles your quote.
You can add a <footer> element within to provide citation information.
Example
Bacon ipsum dolor amet alcatra andouille leberkas beef ribeye drumstick venison picanha pork belly turkey hamburger turducken landjaeger.
Code
<blockquote>Bacon ipsum dolor amet alcatra andouille leberkas beef ribeye drumstick venison picanha pork belly turkey hamburger turducken landjaeger.
<footer>Julius Caesar</footer>
</blockquote>
For Further Information
For further information on Bootstrap helper classes and lables, please see the following websites: