Learn about the button plugin in Bootstrap 4

0
1121
button-plugin

button-plugin
In this article, we will first outline the differences in the button component of Bootstrap v4 vs v3.x.x versions and then demonstrate how to build various kinds of buttons available in Bootstrap v4.

Comparison between Bootstrap v4 vs v3.x.x versions
The following are key changes in the Button component of Bootstrap project between v3.x.x and v4.0.0.

1. Buttons: – These are the changes in the Button component of Bootstrap v4.

  • The .btn-default has been renamed to .btn-secondary.
  • The .btn-xs class has been dropped entirely.
  • Bootstrap v4 project has dropped the state full button feature of the button.js jQuery plugin. It includes the $().button (string) and $().button (‘reset’) methods.
  • The other features of the plugin such as the button checkboxes, button radios, and single-toggle buttons have been retained in Bootstrap v4.
  • The .btn-outline-* classes are added in Bootstrap v4 to outline the button with the color of primary, secondary, info, danger, warning, and success buttons (e.g. .btn-outline-primary class). These outline buttons are new in Bootstrap v4 and there is no outline for link buttons (i.e. .btn-outline-link class).

2. Button group: – The following are the changes in button group component of Bootstrap v4.

  • The .btn-group-xs class has been dropped entirely.

Bootstrap v4 Button Examples
Bootstrap v4 Buttons can be summarized into the following seven features.

  • Semantic Style Buttons: In Bootstrap v4, we can style a button by using its .btn class followed by the preferred style. E.g. class=”btn btn-info”, etc. which will result in an Info button. The following example demonstrates the use of all seven different types of semantic style buttons.

Output
sementaic-styles-button

Output
button-elements

The following is the demonstration on how to disable buttons using Bootstrap v4.

Output
disabled-buttons

  • Button Size: As we know that in Bootstrap v4, the .btn-xs has been dropped for extra small buttons. Therefore, we can only specify the button sizes as .btn-lg and .btn-sm classes (i.e. large and small sizes). These sizing classes can be used along with button semantic styles. The following is the demonstration of the various available button sizes in Bootstrap v4.

Output
button-sizes

  • Button Outlines: In Bootstrap v4, we can use .btn-outline-* classes to apply the semantic color only to the buttons’ outline. The following example demonstrates the use .btn-outline-* classes to outline buttons.

Output:
button-outlines

  • Block Level Buttons: In Bootstrap v4, we can create a block level button with the help of the .btn-block class that spans the width of its parent as shown below.

Output
block-level-buttons

  • Toggle Checkboxes & Radio Buttons: In Bootstrap v4, we can apply button semantic styles to checkboxes and radio buttons in order to provide them with a toggle feature. This can be achieved through the nesting of radio buttons or checkboxes inside a

Output
toggle

Source code for the Outline Button and Button Plugin in Bootstrap v4

Conclusion:
In this article, we have explored all the new features for button components available in Bootstrap v4 along with demo examples.

LEAVE A REPLY

Please enter your comment!
Please enter your name here