Theme Buttons
Predefined button styles, each serving its own semantic purpose.
Disabled Buttons
Predefined button styles, each serving its own semantic purpose.
Outline Buttons
Predefined button styles, each serving its own semantic purpose.
Rounded Buttons
Predefined button styles, each serving its own semantic purpose.
Rounded Outline Buttons
Predefined button styles, each serving its own semantic purpose.
Button Sizes
Fancy larger or smaller buttons?
Add
.btn-lg or .btn-sm and
.btn-blockfor
additional sizes.
Block Button Sizes
Fancy larger or smaller buttons?
Add
.btn-lg or .btn-block and
.btn-smfor
additional sizes.
Button with Icons
A basic button with added icons.
Social Icon Buttons
The classic button, in different social classes.
Button Icons
Predefined button styles, each serving its own semantic purpose.
Loading buttons
Add .btn-loading
to
use a loading
state on
a button. The width of the button depends on the length of the
text
inside Since
the loading spinner is implemented using the element.
Social Icons
You can use only icons.
Toolbar Bouttons
Combine sets of button groups into button toolbars for more complex components.
Tag Buttons
Add .btn,
<input>, <a>classes to quickly
create
a styled
button..
Basic Boutton Group
Use any of the available .btn in
.btn-group classes to
quickly
create a
styled button.
Toggle Buttons
Add data-bs-toggle="button" to
toggle a
button .active class &
required
aria-pressed="true".
Outline Boutton Group
Use any of the available .btn .btn-outline- in .btn-group classes to
quickly
create a
styled button.
Checkbox Button Group
Use any of the available .btn in
.btn-group classes to
quickly
create a
styled button.
Radio Button Group
Use any of the available .btn in
.btn-group classes to
quickly
create a
styled button.
Min-Width Bouttons
Combine sets of button groups into button toolbars for more complex components.
Dropdown Buttons
A button variant for using only icons.
Vertical Button Groups
Use any of the available .btn-group-vertical classes
to
quickly
create a styled button.
Button Group Sizes
Use any of the available .btn-group-* in
.btn-group classes to
quickly
create a
styled button.
Button Groups
Group a series of buttons together on a single line with the button group.
Color variations
The classic button, in different colors.