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.
Button Styles
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:
Button Elements
You can use button classes on <a>, <button>, and <input> elements. Like this:
When using the <a> element to behave as a button (eg, triggering a client-side script, rather than navigating to another URL), use role="button".
It is recommended to use the <button> element whenever possible, as this has the best consistency across browsers.
Button Size
You can specify the button size with Bootstrap's .btn-lg, .btn-sm, and .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 .btn-block class.
Disabled Buttons
Bootstrap provides specific styles for the disabled state (as well as for other states, such as active).
If you need to disable a button that uses an <a> element, you can use Bootstrap's .disabled class.
You don't need to do this on buttons that use the <button> and <input> elements. To disable those buttons, use the standard HTML disabled attribute.
Bootstrap uses the non-standard (at the time of writing) pointer-events: none to disable link buttons (those buttons created with the <a> element). Although this works in many cases, it doesn't work in all cases. Therefore, you should also use JavaScript to disable any link button functionality (or just use a <button> element if you can).