Bootstrap 3 List Groups
Display complex lists with custom content all styled in the Bootstrap way.
In Bootstrap, list groups is a component that styles unordered lists in a particular way. This paves the way for creating more complex lists with custom content, without getting bogged down with presentation issues.
Create a Default List Group
To create a default list group, apply the .list-group class to the <ul> tag, and the .list-group-item to each <li> tag.
Badges
Adding badges to a list group automatically positions them to the right.
Linked List Groups
Bootstrap has specific styles for linked list groups. Linked list items result in the whole item being clickable (not just the text portion). The whole list item receives a "hover" style too.
To create a linked list group, swap the <ul> tag for a <div> tag and the <li> tags for <a>.
You can also use Bootstrap's .active class to highlight a list item as the current one.
Buttons
You can also use buttons instead of links. Just use <button> tags for the .list-group-item.
Disabled Items
You can also apply Bootstrap's .disabled class to a .list-group-item to make it appear disabled.
Contextual Classes
You can also apply Bootstrap's contextual classes to list group items.
To do this, add one of the .list-group-item-* classes to the list group item.
When an item is .active its contextual class appears in a darkened version.
Custom Content
List groups can contain other HTML elements too. And you can make it all clickable if it's nested inside a <a> element.