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.

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.

Color Accessibility Overview

Many of the components discussed within this LibGuide use color. With the use of color, accessibility needs to be a concern. As such, you'll need to know Bootstrap's (as utilized by SpringShare) current contrast issues and potential fixes prior to using some of the color-based styling within Bootstrap.

Color Communicating Meaning

1.4.1. Use of Color: Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.
WCAG 2.0

In an instance where meaning is only communicated using color, you may need to add a <span class="sr-only"></span> to communicate the meaning the color was intended to communicate. The class sr-only hides content from visual users while keeping it available for screen readers.

For further information for this WCAG 2.0 requirement, please check-out W3C's Use of Color: Understanding SC 1.4.1

Color Contrast

The other accessibility consideration concerning the use of color is contrast. Simply put, the font color most contrast enough with the background color that low vision users may read the text.

WCAG 2.0 establishes the required contrast level for small and large fonts. Large fonts are considered to be 18.5px and bold or just bigger than 24px. The following table describes the contrast ratio requirement for AA and AAA WCAG 2.0 compliance:

  Normal Text Large Text
AA 4.5:1 3:1
AAA 7:1 4.5:1

When talking about Bootstrap coloring in terms of contrast, I will be using the terms "Full AA Compliance" and "Full AAA Compliance." With these terms, I am saying that no matter if the element is considered normal or large text, the colors will meet AA or AAA requirements. In order to keep things simple, any CSS suggestions for Bootstrap components will meet the level as indicated for normal and large texts.

Important Tools

Important Resources Concerning Contrast

W3C: Technique G18
Helps explain the contrast rules and how to ensure compliance.

CSS for Accessibility

The following sections provide CSS edits based on the WCAG 2.0 Levels for foreground and backgroung color. This is not an exhaustive list and by no means am I gauranteeing a fully accessible LibGuide. It is essential that you test your guides against accessibility standards.

.navbar-default .navbar-brand,.navbar-default .navbar-nav>li>a{color: #666666}

.text-muted{color:#757575}

.bg-primary{background-color:#265A87}

.label-default{background-color:#757575}

.label-info{background-color:#20809D}

.label-success,.btn-success{background-color:#3A833A}

.label-warning{background-color:#A4660E}

.label-danger,.btn-danger{background-color:#D4403A}

.btn-info{background-color:#20809d}

.btn-warning{background-color:#f0ad4e}

a{color:#24557F}

.navbar-default .navbar-brand,.navbar-default .navbar-nav>li>a{color:#4A4A4A}

.navbar-brand:focus, .navbar-default .navbar-brand:hover,.navbar-default .navbar-nav>li>a:hover,navbar-default .navbar-nav>li>a:focus{color:#595959;background-color:#fff}

.panel-primary>.panel-heading,.label-primary{background-color:#265A87}

.panel-info>.panel-heading{color:#235067}

.panel-success>.panel-heading{color:#2E562E}

.panel-warning>.panel-heading{color:#654F2A}

.panel-danger>.panel-heading{color:#79302F}

.text-muted,blockquote footer, blockquote small,.h1 .small, .h1 small, .h2 .small, .h2 small, .h3 .small, .h3 small, h1 .small, h1 small, h2 .small, h2 small, h3 .small, h3 small,.s-lg-text-ghost,.s-lg-rss-date,.h1 .small, .h1 small, .h2 .small, .h2 small, .h3 .small, .h3 small, .h4 .small, .h4 small, .h5 .small, .h5 small, .h6 .small, .h6 small, h1 .small, h1 small, h2 .small, h2 small, h3 .small, h3 small, h4 .small, h4 small, h5 .small, h5 small, h6 .small, h6 small{color:#595959}

.text-primary{color:#265A87}

.text-info{color:#285C76}

.text-success{color:#326232}

.text-warning{color:#68532C}

.text-danger{color:#933B39}

.label-default{background-color:#595959}

.label-info{background-color:#175D72}

.label-success,.btn-success{background-color:#2C632C}

.label-warning{background-color:#7B4C09}

.label-danger,.btn-danger{background-color:#A72925}

code{color:#9B1C3C}

.btn-info{background-color:#196076}

.btn-warning{background-color:#7D4E0C}

Inserting CSS into All Guides

To insert the CSS above, do the following:

  1. Copy the CSS of the Level you wish to achieve
  2. Click "Look & Feel" from the "Admin" dropdown. If you don't see an "Admin" dropdown, you are not an admin and will need to talk to the individual (s) responisble for administering your guide.
  3. Click the tab named "Custom JS/CSS"
  4. Paste the CSS into the "JS/CSS Code" input area
Subjects: CS & CIDM