Bootstrap 4 Disable Link

Question

i know this is a basic question but I'm really confused, when using bootstrap with the example below the link should still work? and go to the example page?

<div class="collapse navbar-collapse" id="NavbarCollapse">
     <ul class="navbar-nav ml-auto">
         <li class="nav-item">
              <a class="nav-link disabled" href="/example">Link 5</a>
         </li>
     </ul>
</div>

Is the unordered list decorated with the nav class (i.e.,
)? — David Yates, Apr 25 '18 at 19:50
@ZimSystem But since is bootstrap and it works with button, an on the docs is on an "a" tag, shouldn't it work aswell? — Inmpri, Apr 25 '18 at 20:05
links are different than buttons. to disable navigation use https://stackoverflow.com/a/4416239/171456 — Carol Skelly, Apr 25 '18 at 20:07
This question should not have been closed. Asking how to achieve this with Bootstrap 4 is not the same question as asking how to achieve this with HTML and CSS. — koolahman, Mar 20 '20 at 13:33
For disable effect: `a.disabled { pointer-events: none;cursor: default;}` — Bipul Roy, Feb 03 '21 at 12:55

score 0 · Answer 1 · answered Apr 25 '18 at 19:56

0

Class "disabled" is not implemented for "a" tag so it changes nothing at all. This class purpose is for buttons and lists (as far as I remember).

answered Apr 25 '18 at 19:56

MarcinD

1

On the docs the "disabled" is implemented on an "a" tag on the navbar, so i thought it should do something more than styles, but yes on buttons it works fine, but if it's implemented on the "a" tag on navbar it should do something aswell, at least in my head. – Inmpri Apr 25 '18 at 20:01
You're wrong. In your example you should move "disabled" from "a" tag to his "li". Then it will be rendered correctly. This class is created to avoid using "disabled" as attribute in button HTML tag because you are limited with JavaScript functionality, e.g. onclick on disabled button will not work. – MarcinD Apr 29 '18 at 23:00

score -3 · Answer 2 · answered Apr 25 '18 at 19:49

-3

you're using class disabled that's why, if you take that off the link will work

answered Apr 25 '18 at 19:49

mlegg

784
6
19
35

That's the problem, the link still works with the "disabled" class, i doubt that "disabled" is just css esthetics, and if it's shouldn't be i think – Inmpri Apr 25 '18 at 19:55

Bootstrap 4 Disable Link

2 Answers2