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.

Inverse Buttons

Inverse buttons.

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

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.

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.

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.

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.

Social icon buttons

Social buttons with icon and text