Disable a link in Bootstrap

Question

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/

Had a quick look at the docs, looks like disabled is only available for form items. — jksnw, Mar 31 '15 at 23:01

score 154 · Answer 1 · answered Oct 16 '16 at 09:28

154

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

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

answered Oct 16 '16 at 09:28

Caampa

1,547
1
8
3

27

Or maybe better, use `btn-link` to keeps the looks of a link. – Jacob van Lingen May 01 '19 at 06:51
2

@JacobvanLingen But with `btn-link` `disabled` doesn't work properly because `pointer-events: none;` isn't applied (Bootstrap 3) – user764754 Feb 04 '20 at 15:41
Nice; a small addition - if you have the embedded within an inline text, you would want to remove the padding added by btn by adding `p-0` as well. You may also want to remove the outline added when focusing: https://stackoverflow.com/questions/19053181/how-to-remove-focus-around-buttons-on-click – noamyg Nov 30 '20 at 14:22
With Bootstrap 5 you do not have to append any javascript logic. – Roman Apr 27 '23 at 06:39

score 82 · Answer 2 · answered May 08 '17 at 17:53

82

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>

answered May 08 '17 at 17:53

Emanuela Colta

2,129
4
18
31

5

It's worth noting that "pointer-events" has some limitations. From the Bootstrap 3 documentation: "This class uses pointer-events: none to try to disable the link functionality of s, but that CSS property is not yet standardized and isn't fully supported in Opera 18 and below, or in Internet Explorer 11. In addition, even in browsers that do support pointer-events: none, keyboard navigation remains unaffected, meaning that sighted keyboard users and users of assistive technologies will still be able to activate these links. So to be safe, use custom JavaScript to disable such links." – losmescaleros May 23 '17 at 20:51
2

Disabling pointer events will not display tooltip if user required it. Link to disable – JGV Feb 22 '19 at 18:48

score 9 · Answer 3 · edited Jul 11 '19 at 12:47

I just created my own version using CSS. As I need to disabled, then when document is ready use jQuery to make active. So that way a user cannot click on a button until after the document is ready. So i can substitute with AJAX instead. The way I came up with, was to add a class to the anchor tag itself and remove the class when document is ready. Could re-purpose this for your needs.

CSS:

a.disabled{
    pointer-events: none;
    cursor: default;
}

HTML:

<a class="btn btn-info disabled">Link Text</a>

JS:

$(function(){
    $('a.disabled').on('click',function(event){
        event.preventDefault();
    }).removeClass('disabled');
});

score 6 · Answer 4 · edited May 23 '17 at 12:26

6

If what you're trying to do is disable an a link, there is no option to do this. I think you can find an answer that will work for you in this question here.

One option here is to use

<a href="/" onclick="return false;">123n</a>

Disabled href tag

edited May 23 '17 at 12:26

Community

1
1

answered Mar 31 '15 at 23:01

Cassandra

176
2
11

3

You can mimic the styles of a disabled link in CSS by using .disabled{ cursor:not-allowed; color:#eee; } – Cassandra Mar 31 '15 at 23:12
still clickable though – mxmissile Apr 26 '18 at 15:28

score 4 · Answer 5 · answered May 27 '15 at 21:27

You cant set links to "disabled" just system elements like input, textfield etc.

But you can disable links with jQuery/JavaScript

$('.disabled').click(function(e){
    e.preventDefault();
});

Just wrap the above code in whatever event you want to disable the links.

score 1 · Answer 6 · edited Dec 28 '20 at 13:15

1

I just removed 'href' attribute from that anchor tag which I want to disable

$('#idOfAnchorTag').removeAttr('href');

$('#idOfAnchorTag').attr('class', $('#idOfAnchorTag').attr('class')+ ' disabled');

edited Dec 28 '20 at 13:15

Jsowa

9,104
5
56
60

answered Apr 19 '20 at 06:19

asifaftab87

1,315
24
28

score 1 · Answer 7 · answered Mar 24 '21 at 08:44

1

Thanks for @jacob-van-lingen's comment, You can extend .btn-link in your global style

a.disabled{
  @extend .btn-link
}

answered Mar 24 '21 at 08:44

Fangxing

5,716
2
49
53

score 0 · Answer 8 · answered Dec 26 '21 at 10:35

I developed the following solution because when I apply class styles such as btn disabled offered by Bootstrap 5 to an <a> element inside a card, margin and padding are applied to the element:

.disabled {
    color: currentColor;
    cursor: not-allowed;
    opacity: 0.5;
    text-decoration: none;
}

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

score 0 · Answer 9 · answered May 29 '22 at 19:47

I liked the answer by Sercan and I added a tiny jQuery to it, so that the links are also not followed on click:

    $(document)
        .on("click",
            "a.disabled",
            function () {
                return false;
            });

and for the look from the Answer above:

.disabled {
   color: currentColor;
   cursor: not-allowed;
   opacity: 0.5;
   text-decoration: none;
}

score 0 · Answer 10 · answered Mar 21 '23 at 12:46

0

Use class="pe-none".
Find the bootstrap link here.

<a class="btn btn-outline-primary pe-none" target="_blank" href="#" role="button">Open</a>

answered Mar 21 '23 at 12:46

Bessa

1
3

Disable a link in Bootstrap

10 Answers10

Linked