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).