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.

View Buttons Demo

Basics of Bootstrap Buttons

Before creating buttons do remember the following points:

• All button elements should include “.btn” class at the minimum to be identified as a button. Additional classes will only determine further styling of the button in addition to “.btn” class.
• The “.btn” class can be added to HTML elements like <button>, <a>, <input> and <label>.
• Script files are required only for the “Bootstrap Plugins” section to creat toggle effect. All other buttons are covered under the CSS file.

Basic Default Buttons

There are six basic colors included by default in the Bootstrap 4 framework.

• Primary – this is the primary or main button used with blue color .
• Secondary – the white color button is referred as alternate or secondary button.
• Success – green button used for positive actions.
• Info – Light blue button used for showing information.
• Warning – yellow button used for warning actions.
• Danger – Red button used for error actions.

The primary button code should look like

As explained, “.btn” class identifies the element as a button and “.btn-primary” class is used to create the button with primary (blue) color. Similarly other button codes are given below:

The last item is a link button which will look like a text link on display but act like a button when clicked on or hovered over. The default buttons will look like below on the browser:

Button Tags – Using Button Classes with Different Tags

Button classes are supported in <button>, <a> and <input> elements. Below are the code examples for using Bootstrap button classes with different HTML tags:

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:

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:

Here is the code creating button with different sizes:

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:

View Buttons Demo

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.

Below is how it will looks on the browser. When you hover over the disabled button, the cursor will be changed like a stop symbol with no option to click.

Buttons Plugin

As of now what we have discussed are the buttons styled with “bootstrap.min.css”. In next sections you will see creating toggle effects with JavaScript included in “bootstrap.min.js” file.

Button Toggle with Click

Simply add data-toggle=”button” in order to toggle the button to active state on click.

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.

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.

View Buttons Demo