InfoGuides: Using Bootstrap in LibGuides: Buttons

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.

Color Sizing Button Groups Other Options

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.

Color Sizing Button Groups Other Options

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: