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:
<h1>
Title of your LibGuides<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 describe a logical relationship between two words. The three Booleans are:
Further information on wildcards.
Default coloring
Primary coloring
Success coloring
Info coloring
Warning coloring
Danger coloring
<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.
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">
.
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.
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
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.
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.
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} |
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 and documentation for Bootstrap panels, see the resources below: