# Buttons

Use Bootstrap’s custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more. Read the Official Bootstrap Documentation for a full list of instructions and other options.

#### Basic Examples

Bootstrap includes several predefined button styles, each serving its own semantic purpose, with a few extras thrown in for more control.

#### Button tags

The `.btn` classes are designed to be used with the `<button>` element. However, you can also use these classes on `<a>` or `<input>` elements (though some browsers may apply a slightly different rendering).

Link

#### Outline buttons

In need of a button, but not the hefty background colors they bring? Replace the default modifier classes with the `.btn-outline-*` ones to remove all background images and colors on any button.

#### Sizes

Fancy larger or smaller buttons? Add `.btn-lg` or `.btn-sm` for additional sizes.

Create block level buttons—those that span the full width of a parent—by adding `.btn-block`.

#### Active state

Buttons will appear pressed (with a darker background, darker border, and inset shadow) when active. There’s no need to add a class to `<button>`s as they use a pseudo-class. However, you can still force the same active appearance with `.active` (and include the `aria-pressed="true"` attribute) should you need to replicate the state programmatically.

Primary link Link

#### Disabled state

Make buttons look inactive by adding the `disabled` boolean attribute to any `<button>` element.

Disabled buttons using the `<a>` element behave a bit different. `<a>`s don’t support the `disabled` attribute, so you must add the `.disabled` class to make it visually appear disabled.

Primary link Link

#### Icon buttons

Add class `.btn-icon` for buttons with only icons

#### Button with text and icon

Wrap icon and text inside `.btn-icon-text` and use `.btn-icon-prepend` or `.btn-icon-append` for icon tags