Bootstrap 4 Buttons Tutorial

Buttons are one of basic elements of any UI framework. In our earlier article we have seen many examples of Bootstrap 3 buttons. In Bootstrap 4, there are minor changes in the button classes to improve user experience. For example, the default button class “.btn-dafault” is being changed to a secondary button with the class “.btn-secondary” and the extra small button class “.btn-xs” is being dropped. In this tutorial, let us explore more on creating different types of buttons with Bootstrap 4.

Though the elements and attributes are different, the look will be decided based on the CSS classes used. In the above example, we have used “btn-primary”, hence all the buttons will be created with primary blue color.

Outline Buttons

Bootstrap 4 also has a new variation for creating outlined buttons instead of the regular buttons with filled colors. You need to add the outline class like below in order to create outlined buttons with different colors:

The outlined buttons will look like below and will show the corresponding colors on hover:

Remember to include additional text utility class “.text-dark” with button with light outline. Otherwise the text may not be visible clearly.

Different Sizes

Bootstrap 4 allows you to create three button sizes – large, default and small. The extra small option available in Bootstrap 3 was removed in Bootstrap 4. The different sizes are shown below with warning style:

The “.btn-lg” and”.btn-sm” classes are used for larger size and smaller sizes.

Full Width Block Buttons

All the above examples create buttons of size based on text length, padding and margins. There is also an option to create a block button which will inherit the width from the parent element. This is useful to create full width buttons by wrapping the button code inside any parent element (like <div> tag) of 100% width.

Just add the “.btn-block” class to create block buttons and the code for block button should look like below:

Active and Disabled Buttons

By default when a button is pressed, it will be changed to a darker color to indicate it is in a active state. You can also manually force the active state of a button when it is loaded by adding “.active” class along with aria-pressed=”true” attribute. . Similarly you can disable the button clicks by adding “.disabled” class.

If you want to load the button with active state toggled then you need to manually add “.active” class as explained before for creating active buttons. Also add aria-pressed=”true” to inform screen readers that the button is loaded in active state. You can view the demo of all Bootstrap 4 buttons here.

Button Toggle with Checkbox

Similar to individual button toggle, you can also use the toggle function on button groups with checkboxes and radio buttons. Checkbox option allows you to select or toggle more than one button using <label> tags like below.

Checkbox Toggle

1

2

3

4

5

6

7

8

9

10

11

<div class="btn-group"data-toggle="buttons">

<label class="btn btn-secondary active">

<input type="checkbox"checked autocomplete="off">Option1(selected)

</label>

<label class="btn btn-secondary">

<input type="checkbox"autocomplete="off">Option2

</label>

<label class="btn btn-secondary">

<input type="checkbox"autocomplete="off">Option3

</label>

</div>

In this example, the first button is loaded in active status using “.active” class with “checked” parameter for <input> tag. And the below picture shows the state after clicking on the second button (both first and second buttons are selected like checkbox).

Button Toggle with Radio Buttons

The radio buttons option is used to toggle one button at a time similar to choosing regular radio buttons.

Below is the code for creating button groups with radio buttons toggle.

WebNots – A Tech & Web Platform

WebNots is a knowledge sharing platform for webmasters and tech geeks. We have published 1000+ free articles focusing on website building and technology. We share our experience and knowledge through blog articles, demos, eBooks, videos and glossary terms for the benefit of webmasters and tech community.