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

Responsive embeds automatically adjust to the containing element.

Example

Example Code

<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" title="How to paraphrase" src="https://www.youtube.com/embed/oTsE-LRSo_M" allowfullscreen></iframe>
</div>

Using Responsive Embeds

  1. Create an div to contain the embed
  2. Assign the following classes to the containing div
    • embed-responsive
    • embed-responsive-16by9 or embed-responsive-4by3 depending on the aspect ratio of the content
  3. Assign the classembed-responsive-item to the iframe, video, etc.

That's it. You know have an embed that adjusts it's size based on the containing element.

For Further Information

For further information and options concerning responsive embeds, please see the following website:

Subjects: CS & CIDM