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

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:

Booleans

Booleans describe a logical relationship between two words. The three Booleans are:

AND
This boolean requires that both words must be present within a record in order for it to show in your results. This helps to narrow your search.
OR
This boolean requires that either word may be present within a record in order for it to show in your results. This helps to expand your search.
NOT
This boolean requires that the second word cannot be present within a record. This helps refine your search.

Wildcards

Further information on wildcards.

Examples within Columns

panel-default

Default coloring

panel-primary

Primary coloring

panel-success

Success coloring

panel-info

Info coloring

panel-warning

Warning coloring

panel-danger

Danger coloring

Code with Explanations

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

Using Panels with Tables

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.

Example Table

  Column Header Column Header Column Header
Row Header 1 2 3
Row Header 1 2 3
Row Header 1 2 3
Row Header 1 2 3
Row Header 1 2 3

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">.

General Accessibility Notes

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 Resources Concerning Contrast

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

Accessibility Fixes for Panels

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.

By Changing Color

Label Necessary CSS for AAA
Default Already Full AAA
Primary .panel-primary>.panel-heading{background-color:#265A87}
Info .panel-info>.panel-heading{color:#235067}
Success .panel-success>.panel-heading{color:#2E562E}
Warning .panel-warning>.panel-heading{color:#654F2A}
Danger .panel-danger>.panel-heading{color:#79302F}

By Font Size and Bolding

Apply the following CSS rule for panel headings to ensure that panel headings are considered large text for AAA.

.panel-title{font-size:18.5px;font-weight:700}

Warning Enlarging only panel headers will make them seem larger than higher level headers.

For Further Information

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