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 type="button" class="btn btn-default">Default</button>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-link">Link</button>

Button Elements

You can use button classes on <a>, <button>, and <input> elements. Like this:

<a class="btn btn-default" href="#" role="button">Link</a>
<button class="btn btn-default" type="submit">Button</button>
<input class="btn btn-default" type="button" value="Input">
<input class="btn btn-default" type="submit" value="Submit">

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:

<button type="button" class="btn btn-success btn-lg">Large</button>
<button type="button" class="btn btn-success">Default</button>
<button type="button" class="btn btn-success btn-sm">Small</button>
<button type="button" class="btn btn-success btn-xs">Extra small</button>

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.

<button type="button" class="btn btn-danger btn-lg btn-block">Block level button</button>

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.

<p><a href="#" class="btn btn-primary btn-lg disabled" role="button">The 'a' Element</a></p>

<p><button type="button" class="btn btn-lg btn-primary" disabled="disabled">The 'button' Element</button></p>

<p><input type="button" class="btn btn-lg btn-primary" disabled="disabled" value="The 'input' Element"></p>

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