As you already know, buttons are one of the basic elements in any UI framework. If you are working with Bootstrap 4, you should be aware of the small changes for the button classes (they can improve the user experience). In this tutorial, you will find more about how to create different types of buttons using Bootstrap 4.
Bootstrap includes six default button styles as you can see below.
Bootstrap 4’s button styles are designed to be used with the
<button> element. They can also be applied to
Bootstrap 4 offers you the possibility to create outlined buttons instead of the regular buttons with filled colors. Just use Bootstrap 4’s
.btn-outline-* classes in order to apply the semantic color only to the outline.
When speaking about sizes, Bootstrap 4 allows you to create large, default and small button sizes. The extra small option that was available in Bootstrap 3 was now removed in Bootstrap 4.
When active, buttons will appear pressed. You don’t need to add a class to the button because they already use a pseudo-class.
Block Level Buttons
If you want to create a block level button you have to add Bootstrap’s
In order to disable a button, you have to add the
.disabled to any
If you want to have complex components, you can combine sets of button groups. into button toolbars.
Toggle Checkboxes & Radio Buttons
For a toggle feature, you can apply the Bootstrap 4 button styles to radio buttons and checkboxes.