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

Question

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!

Answer 1

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;
}

Answer 2

Use this:

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

Answer 3

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;
   }