Buttons
Examples
Bootstrap includes six predefined button styles, each serving its own semantic purpose.
Soft Buttons
Fancy custom soft buttons? Add
.btn-subtle-primary
Rounded Buttons
Bootstrap includes six predefined button styles, each serving its own semantic purpose.
Outline buttons
In need of a button, but not the hefty
background colors they bring? Replace classes with
the .btn-outline-*
Disabled Buttons
Make buttons look inactive by adding the disabled boolean attribute to any
<button> element.
Sizes
Fancy larger or smaller buttons? Add
.btn-lg or .btn-sm for additional sizes.
Block Buttons
Create block level buttons—those that
span the full width of a parent—by adding .btn-block.
Check And Radio Buttons
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.
Button Group
Group a series of buttons together on a single line with the button group, and super-power them with JavaScript.
Only Icon Buttons
A button variant for using only icons.Add
<i class="fab fa-facebook"i></i>
Icon With Label Buttons
A button variant for using icon with label.Add
<i class="fab fa-facebook"></i>
