Bootstrap Buttons are pre-designed styled buttons elements that come in various styles, colors, and sizes. Bootstrap buttons are pre-defined by Bootstrap classes.
Solid Buttons
Bootstrap provides us with a series of classes that correspond to different solid button styles. These classes are listed below:
| btn-primary |
btn-secondary |
btn-success |
| btn-danger |
btn-warning |
btn-info |
| btn-light |
btn-dark |
btn-link |
Note: We must use an additional btn class with the classes mentioned above and that follows.
Outlined Buttons
Bootstrap provides us with a series of classes that can be used when we need to use outline-styled buttons in our project, that is buttons without background color. The outline button classes remove any background color or background image style applied to the button(s). These classes are listed below:
| btn-outline-primary |
btn-outline-secondary |
btn-outline-success |
| btn-outline-danger |
btn-outline-warning |
btn-outline-info |
| btn-outline-light |
btn-outline-dark |
|
Sizing
Bootstrap provides us with different classes that allow changing the size of the button.
Changing State
Bootstrap provides us with “active” and “disabled” classes to change the state of the button.
- active: This class is used to make buttons and links appear inactive state, i.e., with a dark background, dark border, and an inset shadow.
- disabled: This class is used to make buttons and links appear in a disabled state, i.e., with lighter background color and outset appearance.
Block Level Buttons
Bootstrap provides block-level buttons that take the entire width of the parent element.
Supported Browsers:
- Google Chrome
- Firefox
- Opera
- Safari