Use Bootstrap buttons and Bootstrap custom styles for
actions in forms, dialogues, and more with support for
multiple sizes, states, and more.
Classes
Bootstrap provides different styles of buttons:
.btn
.btn-default
.btn-primary
.btn-success
.btn-info
.btn-warning
.btn-danger
.btn-link
.btn-outline-default
.btn-outline-primary
.btn-outline-success
.btn-outline-info
.btn-outline-warning
.btn-outline-danger
Examples
Bootstrap includes several predefined button styles,
each serving its own semantic purpose, with a few extras
thrown in for more control.
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
.w-100.
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.