How can I change cursor for disabled <button> or <a> in Bootstrap 4?

How can I use cursor: not-allowed on button or a? I tried the following:

.not-allowed {
     pointer-events: auto! important;
     cursor: not-allowed! important;
}

My button looks like this:

<a class="btn btn-primary btn-lg disabled not-allowed" href="https://www.example.com" role="button">Test</a>

Without the pointer-events is activated, the cursor can not be changed. But if pointer-events: auto, the button or a is clickable. If the pointer-events: none the cursor doesn't change.

Please help me, I despair!

This is actually a bug in Bootstrap

The proposed solutions :

button:disabled {
  cursor: not-allowed;
  pointer-events: all !important;
}

or if you have this kind of structure :

<li class="disabled">
  <a href="#">My Link</a>
</li>

then

li.disabled {
  cursor: not-allowed;
}
li.disabled a {
  pointer-events: none;
}

Use this:

.not-allowed {
     cursor: not-allowed !important;
}

You can wrap your button in span like below

<span>
   <button> click me </button>
</span>

Now in css don't allow pointer events on button and make cursor disabled for wrapper.

 button {
     pointer-events: none;
     opacity: 0.7
   }
  

   span {
       cursor: not-allowed;
   }

use onclick="return false;"

.not-allowed{
 cursor: not-allowed! important;
    
}

<a class="btn btn-primary btn-lg disabled not-allowed" onclick="return false;" href="https://www.example.com" role="button">Test</a>

You have a number of options, but not all of them are equal.

Preferably, wrap your element with a div or span and set the cursor on the wrapper and pointer-events on the content. This way you get all benefits without messing with JS.

Second, you can use the attribute disabled on a button, which will make it so that it does not work. You can thenset the cursor on the disabled element.

Lastly, but I don't advise it, is using JS to return false. Even though this works, I don't like it because: the click event is still triggered (i.e. clicking is still possible but the link is not followed through), meaning you also visually think you clicked the button.

.disabled-wrapper {
  display: inline-block;
  cursor: not-allowed;
}

.disabled-wrapper a,
.disabled-wrapper button {
  pointer-events: none;
}

button[disabled] {
  cursor: not-allowed;
}

a.disabled.js-test,
button.disabled.js-test {
  cursor: not-allowed;
}

<div class="disabled-wrapper"><a class="btn btn-primary btn-lg disabled not-allowed" href="https://www.example.com" role="button">Test wrapper</a></div>

<button class="btn btn-primary btn-lg disabled not-allowed" href="https://www.example.com" role="button" disabled>Test disabled attribute</button>

<a class="btn btn-primary btn-lg disabled not-allowed js-test" href="https://www.example.com" role="button" onclick="return false">Test JS</a>

Most of the time not allowed is not work together with the disabled property. is any one looking for disable with not allowed property here is code.

<style>
button
{
  cursor:not-allowed;
}
</style>
<button disabled>
  Click
</button>