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

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.

Table Styling

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

Basic Table

<table class="table">

  Header 1 Header 2
Row Header Bacon ipsum dolor amet alcatra andouille leberkas beef ribeye drumstick venison picanha pork belly turkey hamburger turducken landjaeger. Bacon ipsum dolor amet alcatra andouille leberkas beef ribeye drumstick venison picanha pork belly turkey hamburger turducken landjaeger.
Row Header Bacon ipsum dolor amet alcatra andouille leberkas beef ribeye drumstick venison picanha pork belly turkey hamburger turducken landjaeger. Bacon ipsum dolor amet alcatra andouille leberkas beef ribeye drumstick venison picanha pork belly turkey hamburger turducken landjaeger.
Row Header Bacon ipsum dolor amet alcatra andouille leberkas beef ribeye drumstick venison picanha pork belly turkey hamburger turducken landjaeger. Bacon ipsum dolor amet alcatra andouille leberkas beef ribeye drumstick venison picanha pork belly turkey hamburger turducken landjaeger.

Plus a Border

<table class="table table-bordered">

  Header 1 Header 2
Row Header Bacon ipsum dolor amet alcatra andouille leberkas beef ribeye drumstick venison picanha pork belly turkey hamburger turducken landjaeger. Bacon ipsum dolor amet alcatra andouille leberkas beef ribeye drumstick venison picanha pork belly turkey hamburger turducken landjaeger.
Row Header Bacon ipsum dolor amet alcatra andouille leberkas beef ribeye drumstick venison picanha pork belly turkey hamburger turducken landjaeger. Bacon ipsum dolor amet alcatra andouille leberkas beef ribeye drumstick venison picanha pork belly turkey hamburger turducken landjaeger.
Row Header Bacon ipsum dolor amet alcatra andouille leberkas beef ribeye drumstick venison picanha pork belly turkey hamburger turducken landjaeger. Bacon ipsum dolor amet alcatra andouille leberkas beef ribeye drumstick venison picanha pork belly turkey hamburger turducken landjaeger.

Condensing the Table

<table class="table table-bordered table-condensed">

  Header 1 Header 2
Row Header Bacon ipsum dolor amet alcatra andouille leberkas beef ribeye drumstick venison picanha pork belly turkey hamburger turducken landjaeger. Bacon ipsum dolor amet alcatra andouille leberkas beef ribeye drumstick venison picanha pork belly turkey hamburger turducken landjaeger.
Row Header Bacon ipsum dolor amet alcatra andouille leberkas beef ribeye drumstick venison picanha pork belly turkey hamburger turducken landjaeger. Bacon ipsum dolor amet alcatra andouille leberkas beef ribeye drumstick venison picanha pork belly turkey hamburger turducken landjaeger.
Row Header Bacon ipsum dolor amet alcatra andouille leberkas beef ribeye drumstick venison picanha pork belly turkey hamburger turducken landjaeger. Bacon ipsum dolor amet alcatra andouille leberkas beef ribeye drumstick venison picanha pork belly turkey hamburger turducken landjaeger.

Padding is reduced. It may be hard to see in this example, but the padding is reduced.

Adding Row Hover

<table class="table table-bordered table-condensed table-hover">

  Header 1 Header 2
Row Header Bacon ipsum dolor amet alcatra andouille leberkas beef ribeye drumstick venison picanha pork belly turkey hamburger turducken landjaeger. Bacon ipsum dolor amet alcatra andouille leberkas beef ribeye drumstick venison picanha pork belly turkey hamburger turducken landjaeger.
Row Header Bacon ipsum dolor amet alcatra andouille leberkas beef ribeye drumstick venison picanha pork belly turkey hamburger turducken landjaeger. Bacon ipsum dolor amet alcatra andouille leberkas beef ribeye drumstick venison picanha pork belly turkey hamburger turducken landjaeger.
Row Header Bacon ipsum dolor amet alcatra andouille leberkas beef ribeye drumstick venison picanha pork belly turkey hamburger turducken landjaeger. Bacon ipsum dolor amet alcatra andouille leberkas beef ribeye drumstick venison picanha pork belly turkey hamburger turducken landjaeger.

Adding Row Stripes

<table class="table table-bordered table-condensed table-hover table-striped">

  Header 1 Header 2
Row Header Bacon ipsum dolor amet alcatra andouille leberkas beef ribeye drumstick venison picanha pork belly turkey hamburger turducken landjaeger. Bacon ipsum dolor amet alcatra andouille leberkas beef ribeye drumstick venison picanha pork belly turkey hamburger turducken landjaeger.
Row Header Bacon ipsum dolor amet alcatra andouille leberkas beef ribeye drumstick venison picanha pork belly turkey hamburger turducken landjaeger. Bacon ipsum dolor amet alcatra andouille leberkas beef ribeye drumstick venison picanha pork belly turkey hamburger turducken landjaeger.
Row Header Bacon ipsum dolor amet alcatra andouille leberkas beef ribeye drumstick venison picanha pork belly turkey hamburger turducken landjaeger. Bacon ipsum dolor amet alcatra andouille leberkas beef ribeye drumstick venison picanha pork belly turkey hamburger turducken landjaeger.

Accessible Tables

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

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