Using Bootstrap in LibGuides

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.

Panels aid in separating information within a page. If you find, particularly within LibGuides, that the logical respresentation of the information should remain within the same LibGuide box but delineated to increase usability, panels provide a useful tool. It may be best explained in context of using headers within LibGuides.

In LibGuides, headers are assigned in the following manner:

1. <h1> Title of your LibGuides
2. <h2> Title of the LibGuide box (e.g. This box is titled "Introduction")

Any further headers within a box should start with <h3> and further on down. Presenting information in a logical order using headers is a requirement for accessibility. So at times, you will most likely need to help the visual user delineate information.

Let's pretend you are creating a box explaining search tools to apply in library databses, you may want to keep those tools within the same box. As such, you may want to delineate the tools by panels. For example:

<div class="panel panel-default">
  <div class="panel-heading">
    <h3 class="panel-title">Wildcards</h3>
  </div>
  <div class="panel-body">
    <p>Further information on wildcards.</p>
  </div>
  <div class="panel-footer">
    Example footer.
  </div>
</div>

<div class="panel panel-default">
  <div class="panel-heading">
    <h3 class="panel-title">Wildcards</h3>
  </div>
  <div class="panel-body">
    <p>Further information on wildcards.</p>
  </div>
  <div class="panel-footer">
    Example footer.
  </div>
</div>

Panels enhance a table by using the panel-heading as the title of the table and the panel-footer as a means for providing notes, citation information, etc.

To use a table within a panel, you just substitute the panel-body with table as previously covered:

<table class="table"> instead of <div class="panel-body">.

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.

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:

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.

All panels are fully AA compliant for both normal and large text. You may upgrade to AAA by changing the colors or the panel-title font-size and weight.

For further information and documentation for Bootstrap panels, see the resources below:

• Bootstrap
• w3cschools