Bootstrap 4 Components
You can add buttons to a form, dialogs, and navigation using the class
.btn followed by one of the seven predefined button styles each having its own semantic purposes.
.btn is designed to be used with
<button> element. But can be used within anchor element
<a>...</a> and within
<input> elements, although it is recommended to use
<button> tags as it has better consistency across browsers.
Note: if you are using <a> element to act as a button rather than for navigation purpose, use
role=button for understanding their purpose by assistive technologies like screen readers.
If you want to remove the background colors that each button styles come with or any other background images, you can replace the default modifier classes with
.btn-outline-primary class. This will remove the background color and draws an outline around the button with the semantic color.
You can change the size of the button to a smaller one or a larger one using
.btn-sm .btn-lg classes.
We can create a block level button that spans the length of its parent by adding
You don't need to specify any particular class with <button> to indicate its active state although you can use
.active class and
.aria-pressed=true attribute to force that behavior into an element that is behaving as a button.
You can make buttons look disabled by adding a disabled boolean attribute to
<button> element. But in cases when you are using an
<a> element you have to use
.disabled class for the button to appear disabled.
Note: to indicate the state of the button to assistive technologies include
aria-disabled="true" in the
<a> element with the
data-toggle=”button” to toggle a button's active state.