List Groups are used to create a group of the list with list items. Use the classes .list-group and .list-group-item to create a list of items. The .list-group class is used with <ul> element and .list-group-item is used with <li> element are used to create a basic list group.
List Group with Badges:
The badge can also be added to a list group, simply create an <span> element with class .badge inside the list item to create a badge.
List Group With Linked Items:
To create a linked list group, use <div> and <a> tag instead of <ul> and <li>. The .list-group-item-action class is used to set the hover effect to change the background color. You can also use bootstrap .active class to highlight a list item as the current one.
List Group With Buttons:
You can also use buttons instead of links. Just use <button> tags for the .list-group-item and .list-group-item-action classes.
Active list item:
By using the .active class, you can highlight the current item. It specifies that the specific item is in an active state.
Disabled Items:
To use bootstrap .disabled class to .list-group-item to make it appear disabled.
Contextual Classes:
By using contextual classes, you can set the color to the list of items. To do this, add one of the .list-group-item-* classes (.list-group-item-warning, .list-group-item-danger, list-group-item-info, etc.) to the list group item. If the item is .active then its contextual class appears in a darkened version.
Link items with Contextual Classes:
Flush Borders:
Use the class .list-group-flush to remove some borders and rounded corners.
Horizontal List Groups:
Add .list-group-horizontal class to change the layout of list group items from vertical to horizontal across all breakpoints.