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.

Tables can often be cumbersome, clunky, and ugly. However, Bootstrap provides us a means to make them better with some preset class.

This page will only cover the styling afforded by Bootstrap. If you want to create more accessible tables, please consult WebAIM for quick and easy instructions.

In the following examples, I will start adding available classes to the <table> tag.

There are multiple accessibility considerations with tables that could warrant its own LibGuide. If you're interested in Accessibility (as you should be), I would suggest checking out W3's Web Accessibility Tutorials or WebAIM's Creating Accessible Tables.

General Advice

Do

• Check out W3's Web Accessibility Tutorials or WebAIM's Creating Accessible Tables for complete information
• Heavily consider if a table is actually needed as tables present a potential accessibility issue
• Use tables to represent a small amount of data to reduce information overload and complexity
• Use proper labels for row and column headers (see the link above for more information)
• Use tables with greater height than width as its easier to scroll down rather than horizontally.

Do not:

• Use tables for page layout. Layout is what CSS is for

For further information on Bootstrap tables, please see the following resources:

• Bootstrap
• w3cschools