Skip to main content

Using Bootstrap in LibGuides

LibGuides version 2 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

On this page are various Bootstrap components and styling that you could possibly employ on your own LibGuides. Please look through these examples and choose the component you wish to have more information on from the right navigation menu.

Note: At the Cornette Library, we have changed Bootstrap elements with our own CSS. If you spot differences in styling between similar elements, this is the reason. In places, I have tried restoring defaults.

Please check out: The Grid page since it is an important foundation of Bootstrap that makes the page responsive.

Summery of Useful Tools

The Navigation Bar provides you the ability to create a fully responsive main navigation bar with many useful tools and options.

To see how the Navbar works, please visit the Navigation Bar page of this guide.

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

This table shows what a bootstrap table looks like. The class table provides basic formating. The class table-bordered provides borders. The class table-hover changes the row color while the row is hovered. Content within the Table is repetitive in order to show that the table responds to the size of the contents. Please do not read through table.
 Header 1Header 2
Row HeaderBacon 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 HeaderBacon 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 HeaderBacon 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.

To see how Tables work, please visit the Tables page of this guide.

Panels aid in separating information within a page.

panel-default

Default coloring

panel-primary

Primary coloring


panel-success

Success coloring

panel-info

Info coloring


panel-warning

Warning coloring

panel-danger

Danger coloring


To see how Panels work, please visit the Panels page of this guide.

The Collapse features allows you to hide and show content based on clicking. This is a useful tool to combat information overload.

 

Button Collapsing

Halloween style with the word BOO!

To see how Button Collapsing works, please visit the Collapsing Using a Link/Button page of this guide.

 

Accordion Panels

Example One Body

Example Two Body

Example Three Body

To see how Accordion Panels work, please visit the Collapsing Using Panel Accordion page of this guide.

Helper Classes, Labels, and default styling on HTML elements will help you point or call out important information, mainly by the use of color.

Font Colors

text-muted grey text

text-primary dark blue text

text-info different blue text

text-success light green text

text-warning yellowish-brown text

Background Colors

Dark Blue

Lighter blue

Green

Yellow

Red

Labels

  • Default Label
  • Primary Label
  • Info Label
  • Success Label
  • Warning Label
  • Danger Label

 

Elements

Code Tag
Insert Code Here
Block Quote
I'm of a fearsome mind to throw my arms around every living librarian who crosses my path, on behalf of the souls they never knew they saved.
Barbara Kingsolver

To see how helpers, lables, and default styling work, please visit the Helper Classes and Labels page of this guide.

Tooltips and popovers provide further information on an element when the user hovers (tooltip) or clicks (popover).

Tooltip

Popover

 

To see how tooltips and popovers work, please visit the Tooltips and Popovers page of this guide.

Button Colors

Button Sizes

Button Groups

For Instruction on Buttons

 

To see how buttons work, please visit the Buttons page of this guide.

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.

To see how images work, please visit the Images page of this guide.

Bootstrap has many glyphs to use based off of Glyphicon Halflings.

Icon that looks like a letter envelope

Icon that looks like a magnifying glass that hints a search

Icon that looks like a frame from a film reel

Icon that looks like a check mark

Icon that looks like the letter X

Icon that looks like a down arrow pointing towards an inbox

Icon that looks like a down arrow within a circle

Icon that looks like a page with a corner bent over

Icon that looks like an arrow coming out of a square

To see how glyphs work, please visit the Glyphs page of this guide.

Responsive embed automatically adjust to the containing element.

To see how responsive embeds work, please visit the Responsive Embeds page of this guide.