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

Buttons provide you an ability to make a clickable link or form button. To format buttons, its all a matter of adding classes to the button or a tag.

With all buttons regardless if its a <button> or <a> tag, starts with class="btn". All other classes changes the base format or color.

Note: To ensure you see the default colors, please see the Bootstrap Buttons page.

Button Colors

Color Button Example Code
Default <button class="btn btn-default" type="button">Default</button>
Blue <button class="btn btn-primary" type="button">Primary</button>
Green <button class="btn btn-success" type="button">Success</button>
Light Blue <button class="btn btn-info" type="button">Info</button>
Orange <button class="btn btn-warning" type="button">Warning</button>
Red <button class="btn btn-danger" type="button">Danger</button>

LibGuides have applied some of their own styling to the base of bootstrap. As a result, you will need to add CSS markup for any further customization of button coloring (e.g. accessible hover and focus CSS).

Button Sizing

Sizing Button Example Code
Large <button class="btn btn-info btn-lg" type="button">Large</button>
Default Size <button class="btn btn-info" type="button">Default</button>
Small <button class="btn btn-info btn-sm" type="button">Small</button>
Extra Small <button class="btn btn-info btn-xs" type="button">Extra Small</button>

Button Groups

You can place a series of buttons into a "button group" which formats the buttons together.

Code

<div class="btn-group btn-group-justified">
<a href="#s-lg-box-wrapper-19468375" class="btn btn-lib">Color</a>
<a href="#s-lg-box-wrapper-19468765" class="btn btn-lib">Sizing</a>
<a href="https://infoguides.wtamu.edu/bootstrap/buttons#s-lg-box-16531214" class="btn btn-lib">Button Groups</a>
<a href="#s-lg-box-wrapper-19471980" class="btn btn-lib">Other Options</a>
</div>

Other Classes

There are other neat things you can do with buttons but, to keep this page brief, I will link to their relevant sections within the Bootstrap documentation

Button Toolbar
Helps create more complex button groupings.
Button Dropdowns
Make a button that triggers a dropdown.
Vertical Button Group
Makes the button group stacked vertically.
Justified Button Groups
Makes equal sized buttons.
Button Block
Button fills parent element.

Accessible Button Colors (Not Hover/Focus)

Stock Button Fix to Full AA Fix to Full AAA
N/A N/A
N/A N/A

For Further Information

For further information and options concerning buttons and button groups, please see the following websites:

Buttons

Button Groups