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

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

Create an div to contain the embed
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
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:

Bootstrap