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.
Bootstrap includes several predefined button styles, each serving its own semantic purpose, with a few extras thrown in for more control.
.btn classes are designed to be used with the
<button> element. However, you can also use these classes on
<input> elements (though some browsers may apply a slightly different rendering).
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.
Fancy larger or smaller buttons? Add
.btn-sm for additional sizes.
Create block level buttons—those that span the full width of a parent.
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.
Make buttons look inactive by adding the
disabled boolean attribute to any
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.
.btn-icon for buttons with only icons.
Button with text and icon
Wrap icon and text inside
.btn-icon-text and use
.btn-icon-append for icon tags.