9

I've been using the bootstrap 3.0 and I was wondering how can I disable a list-group-item.

What I tried was to put the disabled atribute in the "a" tag but this not had any effect. I also tried to add the disabled class with the same result.

Here some example:

<div class="list-group">
  <a href="#" class="list-group-item">Add New entry</a>
  <a href="#" class="list-group-item disabled">Delete Entry</a>
</div>

Thanks

Lewis
  • 789
  • 8
  • 20
Juan Jardim
  • 2,232
  • 6
  • 28
  • 46
  • AFAIK there is no way to disable a link (a) in Bootstrap. But this may help: http://stackoverflow.com/questions/2091168/disable-a-link-using-css – Carol Skelly Oct 17 '13 at 19:10

2 Answers2

23

In Bootstrap there are disabled states for froms, navbars links, nav links, dropdownlinks.

I think the disable state of the navs best fits your situation: http://getbootstrap.com/components/#nav-disabled-links

Copy this disable state for your list-group:

Less:

.list-group  > a.disabled  {
      color: @nav-disabled-link-color;

      &:hover,
      &:focus {
        color: @nav-disabled-link-hover-color;
        text-decoration: none;
        background-color: transparent;
        cursor: not-allowed;
      }
    }

Css:

.list-group > a.disabled {
  color: #999999;
}
.list-group > a.disabled:hover,
.list-group > a.disabled:focus {
  color: #999999;
  text-decoration: none;
  background-color: transparent;
  cursor: not-allowed;
}

Example: http://bootply.com/88367

Bass Jobsen
  • 48,736
  • 16
  • 143
  • 224
  • 1
    The link appears to be disabled but still works, so if your link has an href pointing to an URL it will happily bring you there. – Bruno Bossola Nov 18 '17 at 17:24
0

In my case I remove the href attribute, so it will be :

<div class="list-group">
    <a href="#" class="list-group-item">Add New entry</a>
    <a class="list-group-item">Disabled entry</a>
</div>
CHEMSEDDINE HAROUIT
  • 352
  • 2
  • 9