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.


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:
<button type="button" class="btn btn-lg btn-success px-4"> button</button>

<button type="button" class="btn btn-lg btn-success px-4" disabled> button</button>

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:

<a href="#" class="btn btn-lg btn-primary disabled">Click here </a>

<a href="#" class="btn btn-lg btn-primary ">Click here </a>


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:
<input type="button" class=" btn btn-lg btn-primary" value="Submit" disabled>

<input type="button" class=" btn btn-lg btn-primary" value="Submit">


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.

About the author

Nadia Bano

I am an enthusiastic and forward-looking software engineer with an aim to explore the global software industry. I love to write articles on advanced-level designing, coding, and testing.