Bootstrap 4 provides users with different styles of buttons.
- Button Color.
- Button Outline.
- Button Size.
- Block level Buttons.
- Active/Disabled Buttons.
- Spinner Buttons.
Button color:
Use the background-color property to change the background color of a button.
![](https://www.scmgalaxy.com/tutorials/wp-content/uploads/2021/08/button-color-1024x612.png)
Button Outline:
The button outline style removes all background images or colors from a button and gives it a lighter look.
![](https://www.scmgalaxy.com/tutorials/wp-content/uploads/2021/08/btn-btn-outline-primary-1-1024x612.png)
Button Sizes:
This will indicate to you the size of the button.
- Default
- Large (btn-lg)
- Small (btn-sm)
![](https://www.scmgalaxy.com/tutorials/wp-content/uploads/2021/08/bb-1024x612.png)
Block Level Buttons:
The .btn-block class is used to create a block-level button that spans the entire width of the parent elements.
![](https://www.scmgalaxy.com/tutorials/wp-content/uploads/2021/08/bbb-1024x612.png)
Active/Disabled Buttons:
A button can be set to an active (clickable) or a disabled (unclickable) state.
![](https://www.scmgalaxy.com/tutorials/wp-content/uploads/2021/08/bbbb-1024x612.png)
Spinner Buttons:
You can also add “spinners” to a button.
![](https://www.scmgalaxy.com/tutorials/wp-content/uploads/2021/08/bbbbbbbbbbb-1024x612.png)