Button styles can be applied to anything with the .btn class applied. However, typically you'll want to apply these to only a and button elements for the best rendering.
Button | class="" | Description |
---|---|---|
.btn-default |
Default button | |
.btn-primary |
Provides extra visual weight and identifies the primary action in a set of buttons | |
.btn-info |
Used as an alternative to the default styles | |
.btn-success |
Indicates a successful or positive action | |
.btn-warning |
Indicates caution should be taken with this action | |
.btn-danger |
Indicates a dangerous or potentially negative action | |
.btn-inverse |
Alternate dark gray button, not tied to a semantic action or use |
Easy to use icons in custom buttons just add .btn-icon-right
to btn class.
If you would like to add shadow to your buttons then use .btn-shadow
class.
If you would like to add radius to your shadow buttons then use .btn-rounded
class.
Buttons are also available without backgrounds add .btn-outline
.
Outline button no-radius
Outline button no-border
Circle button btn-circle
Fancy larger or smaller buttons? Add .btn-large
, .btn-small
, or .btn-mini
for additional sizes.
Create block level buttons—those that span the full width of a parent— by adding .btn-block
.
Button dropdowns work at any size: .btn-large
, .btn-small
, or .btn-mini
.
Wrap a series of buttons with .btn
in .btn-group
.