Disable list item in Bootstrap 3.0

Question

I am using bootstrap 3.0 and I was wondering how can I disable the list-group element.

I tried putting the disabled attribute in the "a" tag, but this had no effect. I also tried adding a disabled class with the same result.

Here is an 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

Answer 1

Bootstrap has disabled states for froms, navbars links, nav links, dropdownlinks.

I think the disconnected state of navigators is best for your situation: http://getbootstrap.com/components/#nav-disabled-links

Copy this disconnect state for your list group:

Minus:

 .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