How to Disable Bootstrap Buttons

The buttons are the clickable components in any application. They can perform different functions, such as generating events, submitting forms, and executing any action. However, there are several states of buttons, like active, and loading, that are utilized according to the situation. More specifically, the “disabled” attribute or class is also used to make them un-clickable or unusable.

This post will illustrate how to disable buttons in Bootstrap.

How to Disable Buttons in Bootstrap?

The HTML “<button>” element can be utilized to create buttons in HTML. Then, its relevant “disabled” attribute can make the button disabled.

Example

In HTML, add two button tags associated with the “class” attribute and specify the following classes:

• The “btn” class is utilized to add general styles to the buttons.
• The “btn-lg” class creates a large button.
• The “btn-success” creates a class with a green color.
• The “px-4” class defines the padding in the x-axis within the class:

It can be observed that we have successfully disabled the second button of our web page:

How to Disable Buttons Created With <a> in Bootstrap?

The buttons that are created with the “<a>” tag are specified with the class “disabled”. Notably, the “disabled” attribute does not work on it.

Example

In this example, the “href” attribute in the “<a>” tag is utilized to add a link to the button. The value “#” is assigned, which represents a dummy link. The “class” attribute is specified with the classes as explained in the above example:

Output

How to Disable Buttons Created With the <input> in Bootstrap?

The button elements that are created with the “<input>” tags can be made disabled by using the “disabled” attribute.

Example

In the HTML file, add the following codes to create buttons. Add “<input>” element with the attribute “type”, “class”, and “value”, where:

• The “type” attribute specifies the type of element.
• The “value” attribute sets the text on the buttons.
• The “disabled” attribute is specified in the first button to make a difference in both buttons:

Output

This is all about disabling buttons in Bootstrap.

Conclusion

To disable the buttons in Bootstrap, first, create a button using the “btn” class. Then, specify the “disabled” attribute in the start tag of the button element to represent them as unusable. However, this attribute does not work on the buttons created with the “<a>” tag, so they are assigned the Bootstrap “disabled” class. This article has illustrated the procedure to disable buttons in Bootstrap.