Bootstrap 4 List Groups

Display complex lists with custom content all with a distict style and function.

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

You can add badges to list groups. You can align them with the other content using classes like justify-content-between (which translates into justify-content: space-between).

Linked List Groups

You can use Bootstrap 4's .list-group-item-action to for linked list items. 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/.list-group-item-action classes.

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.

Bootstrap 4 has the .list-group-item-heading class for headings and the .list-group-item-text class for text.