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 |
Standard button | |
btn btn-primary |
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 |
Deemphasize a button by making it look like a link while maintaining button behavior |
Fancy larger or smaller buttons? Add .btn-large
, .btn-small
, or .btn-mini
for additional sizes.
- <p>
- <button class="btn btn-large btn-primary" type="button">Large button</button>
- <button class="btn btn-large" type="button">Large button</button>
- </p>
- <p>
- <button class="btn btn-primary" type="button">Default button</button>
- <button class="btn" type="button">Default button</button>
- </p>
- <p>
- <button class="btn btn-small btn-primary" type="button">Small button</button>
- <button class="btn btn-small" type="button">Small button</button>
- </p>
- <p>
- <button class="btn btn-mini btn-primary" type="button">Mini button</button>
- <button class="btn btn-mini" type="button">Mini button</button>
- </p>
Create block level buttons—those that span the full width of a parent— by adding .btn-block
.
- <button class="btn btn-large btn-block btn-primary" type="button">Block level button</button>
- <button class="btn btn-large btn-block" type="button">Block level button</button>
Make buttons look unclickable by fading them back 50%.
Add the .disabled
class to <a>
buttons.
- <a href="#" class="btn btn-large btn-primary disabled">Primary link</a>
- <a href="#" class="btn btn-large disabled">Link</a>
Heads up! We use .disabled
as a utility class here, similar to the common .active
class, so no prefix is required. Also, this class is only for aesthetic; you must use custom JavaScript to disable links here.
Add the disabled
attribute to <button>
buttons.
- <button type="button" class="btn btn-large btn-primary disabled" disabled="disabled">Primary button</button>
- <button type="button" class="btn btn-large" disabled>Button</button>
Use the .btn
class on an <a>
, <button>
, or <input>
element.
- <a class="btn" href="">Link</a>
- <button class="btn" type="submit">Button</button>
- <input class="btn" type="button" value="Input">
- <input class="btn" type="submit" value="Submit">
As a best practice, try to match the element for your context to ensure matching cross-browser rendering. If you have an input
, use an <input type="submit">
for your button.