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
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 left 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.
Summary 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.
| 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. |
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
Peeka
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.
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
To apply rounded edges, add the class img-rounded to your <img> tag.
Image Circle
To make an image in a shape of a circle, add the class img-circle to your <img> tag.
Thumbnail
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.