Menu
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
290
list-group-flush to remove some borders and rounded corners to render list group items edge-to-edge in a parent container (e.g., cards).
Add the badges component to any list group item and it will automatically be positioned on the right. Just add <span class = "badge"> within the <li> element.
list-unstyled class removes the default list-style and left padding only from the list items which are immediate children of the <ul> or <ol> element.
List Groups are used to display a series of content. We can modify them to support any content as per our needs. The use of List-Groups is just to display a series or list of content in an organized way.
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
158
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
