YouTip

This chapter will explain how to use Bootstrap buttons through examples. Any element with the class **.btn** will inherit the default appearance of a rounded gray button. However, Bootstrap provides several options to define button styles, as shown in the following table: The following styles can be used on , , or elements: | Class | Description | Example | | --- | --- | --- | | .btn | Adds basic style to a button | (#) | | .btn-default | Default/Standard button | (#) | | .btn-primary | Original button style (not acted upon) | (#) | | .btn-success | Indicates a successful action | (#) | | .btn-info | This style can be used for buttons that pop up information | (#) | | .btn-warning | Indicates a button that requires careful operation | (#) | | .btn-danger | Indicates a button for a dangerous action | (#) | | .btn-link | Makes a button look like a link (still retains button behavior) | (#) | | .btn-lg | Creates a large button | (#) | | .btn-sm | Creates a small button | (#) | | .btn-xs | Creates an extra small button | (#) | | .btn-block | Block-level button (stretches to 100% of the parent element's width) | (#) | | .active | Button is clicked | (#) | | .disabled | Disabled button | (#) | The following example demonstrates all the button classes above: ## Example Default ButtonOriginal ButtonSuccess ButtonInfo ButtonWarning ButtonDanger ButtonLink Button [Try it »](#) The result is as follows:  The following table lists the classes for getting buttons of various sizes: | Class | Description | | --- | --- | | .btn-lg | This makes the button look larger. | | .btn-sm | This makes the button look smaller. | | .btn-xs | This makes the button look extra small. | | .btn-block | This creates a block-level button, spanning the full width of the parent element. | The following example demonstrates all the button classes above: ## Example

Large Original ButtonLarge Button

Default Size Original ButtonDefault Size Button

Small Original ButtonSmall Button

Extra Small Original ButtonExtra Small Button

Block-level Original ButtonBlock-level Button

[Try it »](#) The result is as follows:  Bootstrap provides classes for button states like active and disabled, which will be explained in detail below. ### Active State Buttons appear pressed (with a darker background, darker border, and inset shadow) when active. The following table lists the classes for making button elements and anchor elements appear active: | Element | Class | | --- | --- | | Button Element | Add the **.active** class to show it is active. | | Anchor Element | Add the **.active** class to the button to show it is active. | The following example demonstrates this: ## Example

Default ButtonActive Button

Original ButtonActive Original Button

[Try it »](#) The result is as follows:  ### Disabled State When you disable a button, its color fades by 50% and loses the gradient. The following table lists the classes for making button elements and anchor elements appear disabled: | Element | Class | | --- | --- | | Button Element | Add the **disabled** _attribute_ to the button. | | Anchor Element | Add the **disabled** _class_ to the button. | The following example demonstrates this: ## Example

Default ButtonDisabled Button

Original ButtonDisabled Original Button

LinkDisabled Link

Original LinkDisabled Original Link

[Try it »](#) The result is as follows:  You can use button classes on , , or elements. However, it is recommended to use button classes on elements to avoid cross-browser inconsistencies. The following example demonstrates this: ## Example LinkButton [Try it »](#) The result is as follows:  * * * ## Button Groups You can create button groups directly in a div using .btn-group: ## Example [Try it »](#) Use .btn-group-lg|sm|xs to control the size of the button group: ## Example [Try it »](#) To set a vertical button group, you can use the .btn-group-vertical class: ## Example [Try it »](#) * * * ## Justified Button Groups You can create justified button groups using the .btn-group-justified class. The following example uses tags: ## Example [Try it »](#) **Note:** If using `` elements, you need to wrap them with a `.btn-group` class: ## Example

Apple