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

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