Skip to main content

Using Bootstrap in LibGuides

LibGuides is built upon Bootstrap, a framework of CSS, JavaScript, and HTML. Librarians can increase the usability and functionality of their guides with Bootstrap’s components without the need of extensive web development experience.

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 ClassCodeColor HexCurrent 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.
Julius Caesar

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: