Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Disable a link in Bootstrap

The first example didn't work. I need to have always a list to disable links? Or what is wrong with my first demo?

<a class="disabled" href="#">Disabled link</a> 

<ul class="nav nav-pills">   ...   <li role="presentation" class="disabled"><a href="#">Disabled link</a></li>   ... </ul> 

https://jsfiddle.net/7y0u2amy/

like image 242
user2990084 Avatar asked Mar 31 '15 22:03

user2990084


People also ask

How do I disable a link?

It is still possible to disable a link by following 3 steps: remove the href attribute so that it can no longer receive the focus. add a role="link" so that it is always considered a link by screen readers. add an attribute aria-disabled="true" so that it is indicated as being disabled.

How do I remove a hyperlink link?

To remove a hyperlink but keep the text, right-click the hyperlink and click Remove Hyperlink. To remove the hyperlink completely, select it and then press Delete.

How do you disable a link in CSS?

To disable a HTML anchor element with CSS, we can apply the pointer-events: none style. pointer-events: none will disable all click events on the anchor element. This is a great option when you only have access to class or style attributes. It can even be used to disable all the HTML links on a page.

How do I stop a href tag?

To prevent an anchor from visiting the specified href, you can call the Event interface's preventDefault() method on the anchor's click handle.


2 Answers

I think you need the btn class.
It would be like this:

<a class="btn disabled" href="#">Disabled link</a> 
like image 83
Caampa Avatar answered Sep 21 '22 06:09

Caampa


It seems that Bootstrap doesn't support disabled links. Instead of trying to add a Bootstrap class, you could add a class by your own and add some styling to it, just like this:

a.disabled {    /* Make the disabled links grayish*/    color: gray;    /* And disable the pointer events */    pointer-events: none;  }
<!-- Make the disabled links unfocusable as well -->  <a href="#" class="disabled" tabindex="-1">Link to disable</a><br/>  <a href="#">Non-disabled Link</a>
like image 42
Emanuela Colta Avatar answered Sep 23 '22 06:09

Emanuela Colta