Bootstrap 4 Buttons Tutorial

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.


Button Tags



Button Elements

Bootstrap 4’s button styles are designed to be used with the  <button>  element. They can also be applied to <input> and <a> elements.



Buttons outline

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.


Active state

When active, buttons will appear pressed. You don’t need to add a class to the button because they already use a pseudo-class.

Primary link Link


Block Level Buttons

If you want to create a block level button you have to add Bootstrap’s .btn-block class.


Disabled state

In order to disable a button, you have to add the .disabled to any <button> element.

The ‘a’ Element


Button toolbar

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.


Radio Buttons