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.

 

Examples

Bootstrap includes six default button styles as you can see below.

Primary Secondary Success Info Warning Danger Link

https://gist.github.com/DianaEC/54684b7cf5dcbbcaa06520a58429ec90

 

Button Tags

Link Button

https://gist.github.com/DianaEC/1b024ce3b368908ad6336e06489d6b57

 

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.

Anchor Button

https://gist.github.com/DianaEC/1a09a4115302f42d24f18ae415a622d4

 

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.

Primary Secondary Success Info Warning Danger

https://gist.github.com/DianaEC/cd62bc08cca473c96bfc588f44c532bb

 

Sizes

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.

Large button Large button

https://gist.github.com/DianaEC/46967bb36ba5374238fbc7ddf1419355

 

Default

https://gist.github.com/DianaEC/78dacf5300ba1e7ee511c7d1ed39802a

 

Small button Small button

https://gist.github.com/DianaEC/b88360633059984b1e84143479240cba

 

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

https://gist.github.com/DianaEC/d1ceda4eb1cf7156358f11859a7460b2

 

Block Level Buttons

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

Block level button

https://gist.github.com/DianaEC/56d2023c318340e56eda1437cbe59ccc

 

Disabled state

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

The ‘a’ Element The ‘button’ Element

https://gist.github.com/DianaEC/9dd3df3e6f3242a96711146d680b185d

 

Button toolbar

If you want to have complex components, you can combine sets of button groups. into button toolbars.

 

https://gist.github.com/DianaEC/28967bfa70ab8d92397262b5cee34c31

 

Toggle Checkboxes & Radio Buttons

For a toggle feature, you can apply the Bootstrap 4 button styles to radio buttons and checkboxes.

Checkboxes

https://gist.github.com/DianaEC/b5ca686d1b4db80ea5d6b8864dec3ed7

Radio Buttons

https://gist.github.com/DianaEC/ca1f5b219e69040e84226564549a7cfd