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.

Authored by

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.

Introduction

Bootstrap within LibGuides provides means for making images responsive, formatting the image, and hiding content based on screen size.

Responsive Images

You can make the images responsive to the size of the containing element by adding class="img-responsive" to your <img> tag.

Example

example image showing how the image changes shaped based on the containing element

Image Shapes

Bootstrap provides three classes that applies shapes to images.

Rounded Edges

Image has rounded edges

To apply rounded edges, add the class img-rounded to your <img> tag.

Image Circle

Image is now in the shape of a circle

To make an image in a shape of a circle, add the class img-circle to your <img> tag.

Thumbnail

Image has rounded edges

To apply thumbnail formating to your image, add the class img-thumbnail to your <img> tag.

Hiding Images by Screen Size

As covered in "The Grid" section, elements are formatted by screen size, included in this is the ability to hide content based on the screen size. Hiding images based on screen size is a best practice for limiting bandwidth and removing unnecessary, decorative images from your LibGuide. The following are the classes you can add to any element to hide content based on screen size:

Screen Size Classes Example
xs .hidden-xs

Image is now hidden.
sm .hidden-sm

Image is now hidden.
md .hidden-md This image is here only because the screen size allows via the bootstrap class hidden

Image is now hidden.
lg .hidden-lg

Image is now hidden.

Note: The Image is now hidden labels are only visibile on certain screen sizes, using the classes .visibile-*.

Accessibility Notes for Images

Do

  • Assign the following attributes to decorative images and videos
    • class="hidden-xs"
    • aria-hidden="true"
    • role="presentation"
    • alt=""
  • Place decorative images where screen readers skip unnecessary information (e.g. unnecessary headings) by:
    • Placing decorative images within the content of other boxes using floats or,
    • Creating a floating box for the image
  • Describe all relevant content and context contained within images/screenshots that communicates meaning for accessibility purposes
    • Use alternative text
  • Consider all copyright and licensing requirements, even for open source materials
  • Consider the image size in consideration of users with slow internet speeds and mobile data limits
    • Images should be less the 2mbs

Do Not

  • Use the <a> tag and alt attribute to link an informative image, widget, etc. to the creator as a form of citation
    • This causes a screen reader to hear, unnecessarily, the URL
    • Try using images from sources that do not require attribution (e.g. Pixabay) or,
    • Cite the source after the image

For Further Information

For further information and options concerning images, please see the following websites:

Subjects: CS & CIDM