1 Buttons
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.
1.1 Base styles & states
:hover
Hover state.
:active
Active state.
.disabled
Disabled button. If you use
<button> element, that is acceptable to add disabled attribute instead.
<button type="submit" class="btn btn-primary [modifier class]">Button</button>
<button type="submit" class="btn [modifier class]">Button</button>1.2 Sizing
Fancy larger or smaller buttons?
Add .btn-large, .btn-small, or .btn-mini for additional sizes.
.btn-large
Large button.
.btn-smalll
Small button.
.btn-mini
Mini button.
.btn-block
Block level button.
<button type="submit" class="btn btn-primary [modifier class]">Button</button>
<button type="submit" class="btn [modifier class]">Button</button>1.3 Skins
Use the .btn class on an <a>, <button>, or <input> element.
.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.
.btn-link
Deemphasize a button by making it look like a link while maintaining button behavior.
<a href="#" class="btn [modifier class]">Link</a>
<button type="submit" class="btn [modifier class]">Button</button>
<input type="submit" class="btn [modifier class]" value="Input:submit" />
<input type="button" class="btn [modifier class]" value="Input:button" />