Bootstrap CSS Buttons Reference
Button Colors
Button Sizes
Active/Disabled Buttons
Block-level Button
Button Classes
The classes below can be used to style any <a>, <button>, or <input> element:
Class | Description | Example |
---|---|---|
.btn | Adds basic styling to any button | Try it |
.btn-default | Indicates a default/standard button | Try it |
.btn-primary | Provides extra visual weight and identifies the primary action in a set of buttons | Try it |
.btn-success | Indicates a successful or positive action | Try it |
.btn-info | Contextual button for informational alert messages | Try it |
.btn-warning | Indicates caution should be taken with this action | Try it |
.btn-danger | Indicates a dangerous or potentially negative action | Try it |
.btn-link | Makes a button look like a link (will still have button behavior) | Try it |
.btn-lg | Makes a large button | Try it |
.btn-sm | Makes a small button | Try it |
.btn-xs | Makes an extra small button | Try it |
.btn-block | Makes a block-level button (spans the full width of the parent element) | Try it |
.active | Makes the button appear pressed | Try it |
.disabled | Makes the button disabled | Try it |