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.
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.
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:
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.
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:
This is all about disabling buttons in Bootstrap.
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.