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
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.
You can also use Bootstrap's
.active class to highlight a list item as the current one.
You can also use buttons instead of links. Just use
<button> tags for the
You can also apply Bootstrap's
.disabled class to a
.list-group-item to make it appear disabled.
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.
List groups can contain other HTML elements too. And you can make it all clickable if it's nested inside a