The styles below can be used with button tags, link (anchor) tags, and the form submit tags. Combine them to change button colour, size and add any of the 250 available icons.
| Button | class="" | Description |
|---|---|---|
btn
|
Standard gray button | |
btn btn-primary
|
Provides extra visual weight and identifies the primary action in a set of buttons | |
btn btn-secondary
|
Provides extra visual weight and identifies the primary action in a set of buttons | |
btn btn-info
|
Used as an alternative to the default styles | |
btn btn-success
|
Indicates a successful or positive action | |
btn btn-warning
|
Indicates caution should be taken with this action | |
btn btn-danger
|
Indicates a dangerous or potentially negative action | |
btn btn-inverse
|
Alternate dark gray button, not tied to a semantic action or use | |
btn btn-link
|
Make the button look like a link, but maintain button behavior |
Button sizes
Create block level buttons – those that span the full width of a parent— by adding .btn-block.
Buttons with icons
To learn more check the documentation.