Bootstrap includes six predefined button styles, each serving its own semantic purpose.
Fancy custom soft buttons? Add .btn-soft-primary
Bootstrap includes six predefined button styles, each serving its own semantic purpose.
In need of a button, but not the hefty background colors they bring? Replace classes with the .btn-outline-*
Make buttons look inactive by adding the disabled boolean attribute to any <button>
element.
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
.
Bootstrap’s .button
styles can be applied to other elements, such as <label>
s, to provide checkbox or radio style button toggling. Add data-toggle="buttons"
to a .btn-group
containing those modified buttons to enable their toggling behavior via JavaScript and add .btn-group-toggle
to style the <input>
s within your buttons.
Group a series of buttons together on a single line with the button group, and super-power them with JavaScript.
A button variant for using only icons.Add <i class="fab fa-facebook"i></i>
A button variant for using icon with label.Add <i class="fab fa-facebook"></i>