Skip to main content

Bootstrap in LibGuides V.2

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

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.

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.

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

Table Example

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.
  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.

Panel Examples

panel-default

Default coloring

panel-primary

Primary coloring

panel-success

Success coloring

panel-info

Info coloring

panel-warning

Warning coloring

panel-danger

Danger coloring

I placed each panel within column div with the class col-sm-4 col-md-6 plus an alternating class using col-lg-8 and col-lg-4.

Collapsing Panel Accordion Example

Example One Body

Example Two Body

Example Three Body

Helper Classes, Labels, and Elements Examples

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

text-danger light red 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

Tooltiip and Popover Examples

Tooltip

Popover

Buttons Example

The Tooltips and Popover Box contains two buttons.

Images Example

Rounded Images

Image has rounded edges

Image Circle

Image is now in the shape of a circle

Thumbnail

Image has rounded edges

Responsive Embeds Example