Bootstrap Buttons

This chapter will explain how to use Bootstrap buttons through examples. Any element with class.btnwill inherit the default appearance of rounded gray buttons. However, Bootstrap provides some options to define button styles, as shown in the table below:

The following styles can be used on <a>, <button>, or <input> elements:

Class	Description	Example
.btn	Add basic styles to buttons	Try it
.btn-default	Default/Standard button	Try it
.btn-primary	Primary button style (not active)	Try it
.btn-success	Indicates a successful action	Try it
.btn-info	This style can be used for buttons that pop up information	Try it
.btn-warning	Indicates a button that requires careful operation	Try it
.btn-danger	Indicates a button operation representing a dangerous action	Try it
.btn-link	Make the button look like a link (while still retaining button behavior)	Try it
.btn-lg	Make a large button	Try it
.btn-sm	Make a small button	Try it
.btn-xs	Make an extra small button	Try it
.btn-block	Block-level button (stretched to 100% width of the parent element)	Try it
.active	Button is clicked	Try it
.disabled	Disabled button	Try it

The following examples demonstrate all the button classes above:

The result is as follows:

Button Sizes

The following table lists the classes for obtaining buttons of various sizes:

Class	Description
.btn-lg	This will make the button look larger.
.btn-sm	This will make the button look smaller.
.btn-xs	This will make the button look extra small.
.btn-block	This creates a block-level button that spans the full width of the parent element.

The following example demonstrates all the button classes above:

The result is as follows:

Button States

Bootstrap provides classes for button states such as active and disabled, which will be explained in detail below.

Active State

When a button is active, it will appear pressed (darker background, darker border, and shadow).

The following table lists the classes that make button elements and anchor elements appear active:

Element	Class
Button element	Add.activeclass to show it is active.
Anchor element	Add .activeclass to the <a> button to show it is active.

The following example demonstrates this:

The result is as follows:

Disabled State

When you disable a button, its color fades by 50% and it loses its gradient.

The following table lists the classes that make button elements and anchor elements appear disabled:

Element	Class
Button element	Adddisabled attributeto the <button> button.
Anchor element	Adddisabled classto the <a> button.

The following example demonstrates this:

The result is as follows:

Button Tags

You can use the button classes on <a>, <button>, or <input> elements. However, it is recommended that you use the button classes on <button> elements to avoid cross-browser inconsistencies.

The following example demonstrates this:

The result is as follows:

---

Button Groups

Use .btn-group directly within a div to create a button group:

Use .btn-group-lg|sm|xs to control the size of the button group:

To create vertically stacked buttons, use the .btn-group-vertical class:

---

Responsive Button Groups

You can create justified button groups with the .btn-group-justified class.

The following example uses an a tag to demonstrate:

Note:If it is<button>element, you need to use on the outer layer.btn-groupclass to wrap:

---

Button Groups with Dropdown Menus

Buttons within a button group can have dropdown menus, as in the following example:

Split Buttons

Other extensions