Create custom button styles(multiple sizes, states, and more) using bootstrap.
Add .btn class and any of the predefined button styles to the
Add any below classes to color your button as needed.
Using color only provides a visual indication. To support users of assistive technologies such as screen readers include additional text hidden with the
You can also use .btn classes on
When using button classes on
<a> elements for triggering functionality like collapsing content etc., instead of linking purpose, these links should be given a
role="button" to appropriately convey their purpose to assistive technologies such as screen readers.
.btn-outline-* classes to create outline colored button which remove all background images and colors on any button.
.btn-lg for large buttons or
.btn-sm for small buttons or .btn-block for block level buttons which fill the width of the parent element.
Create block level buttons—those that span the full width of a parent—by adding
When active buttons will appear pressed (with a darker background, darker border, and inset shadow).
<button>s use a pseudo-class sohere's no need to add a class. You can also force the same active appearance with
.active and programmatically include the
aria-pressed="true" attribute to indicate the state of the element to assistive technologies.
disabled boolean attribute to any
<button> element to make buttons look inactive.
Disabled buttons using the
<a>s don't support the
disabledattribute, so add the
.disabledclass to make it visually appear disabled.
aria-disabled="true"attribute to indicate the state of the element to assistive technologies.
.disabled class uses
pointer-events: none to disable the link functionality of
Create groups of buttons for more components like toolbars.
data-toggle="button" to toggle a button's
active state. For pre-toggling a button, manually add the
.active class and
aria-pressed="true" to the
You can apply
button styles to other elements, such as
<label>s, to provide checkbox or radio style button toggling. Add
data-toggle="buttons" to a
.btn-group-toggle to style the
<input>s within your buttons. You can create single input buttons or groups of them.
The checked state for these buttons is only updated via
click event on the button. Add
.active on the
<label> when you manually apply input's
checked property or when using
Note that pre-checked buttons you need to manually add the
.active class to the input's
||Toggles push state. Gives the button the appearance that it has been activated.|
||Destroys an element's button.|