Button Styles

Bootstrap provides different styles of buttons

Basic Default Primary Success Info Warning Danger Link

To achieve the button styles above, Bootstrap has the following classes:

• .btn
• .btn-default
• .btn-primary
• .btn-success
• .btn-info
• .btn-warning
• .btn-danger
• .btn-link

Block Level Buttons

A block level button spans the entire width of the parent element.
Add class .btn-block to create a block level button

Active/Disabled Buttons

A button can be set to an active (appear pressed) or a disabled (unclickable) state
The class .active makes a button appear pressed, and the class .disabled makes a button unclickable

Button Sizes

Large
Small
XSmall

Button Classes

Class	Description	Example
.btn	Adds basic styling to any button
.btn-default	Indicates a default/standard button
.btn-primary	Provides extra visual weight and identifies the primary action in a set of buttons
.btn-success	Indicates a successful or positive action
.btn-info	Contextual button for informational alert messages
.btn-warning	Indicates caution should be taken with this action
.btn-danger	Indicates a dangerous or potentially negative action
.btn-link	Makes a button look like a link (will still have button behavior)
.btn-lg	Makes a large button
.btn-sm	Makes a small button
.btn-xs	Makes an extra small button
.btn-block	Makes a block-level button (spans the full width of the parent element)
.active	Makes the button appear pressed
.disabled	Makes the button disabled
.navbar-btn	Vertically aligns a button inside a navbar