Bootstrap 3 Buttons
Give buttons a fresh and consistent look with Bootstrap's button styles.
Bootstrap provides a number of classes for styling buttons (and for styling
<a> elements to look and feel like a button).
There are a number of options you can use when styling a button, such as size, color, and disabled state.
Bootstrap has 7 different options for styling your buttons. They are as follows:
|Standard button with default styling.|
|Provides extra visual weight and identifies the primary action in a set of buttons.|
|Indicates a successful or positive action.|
|Contextual button for informational alert messages.|
|Indicates caution should be taken with this action.|
|Indicates a dangerous or potentially negative action.|
|Deemphasize a button by making it look like a link while maintaining button behavior.|
To style a button, use Bootstrap's
.btn class, followed by the desired style. For example,
class="btn btn-default" results in a default button.
Here's the code used for all 7 styles:
When using the
<a> element to behave as a button (eg, triggering a client-side script, rather than navigating to another URL), use
It is recommended to use the
<button> element whenever possible, as this has the best consistency across browsers.
You can specify the button size with Bootstrap's
.btn-xs classes. Place these in addition to the other button classes. Like this:
Block Level Buttons
A block level button spans the width of its parent. You can create a block level button by adding Bootstrap's
Bootstrap provides specific styles for the
disabled state (as well as for other states, such as
If you need to disable a button that uses an
<a> element, you can use Bootstrap's
Bootstrap uses the non-standard (at the time of writing)
pointer-events: none to disable link buttons (those buttons created with the
<button> element if you can).