Use list-group class in an unordered list and list-group-item class to create a default list group.

Use active class to list-group-item to indicate the current active selection.

Use disabled class to list-group-item to make it appear disabled.

• 

  James Ballard
• 

  Nancy Martino
• 

  Henry Baird
• 

  Erica Kernan

Use <a> tag to create actionable list group items with hover, disabled, and active states by adding list-group-item-action.

Use <button> tag to create actionable list group items with hover, disabled, and active states by adding list-group-item-action.

Use list-group-flush class to remove some borders and rounded corners to render list group items.

• Send the billing agreement
• Send over all the documentation.
• Meeting with daron to review the intake form
• Check uikings theme and give customer support
• Start making a presentation

Use contextual classes to style list items with a stateful background and color.

• Dapibus ac facilisis in
• A simple primary list group item
• A simple secondary list group item
• A simple success list group item
• A simple danger list group item
• A simple warning list group item
• A simple info list group item
• A simple light list group item
• A simple dark list group item

Contextual classes also work with .list-group-item-action. Note the addition of the hover styles here not present in the previous example.

Use list-group-fill- with modifier class to style list items with a stateful background and color.

Use badges to any list group item to show unread counts, activity, and more with the help of some utilities.

• Send the billing agreement High
• Send over all the documentation
• Meeting with daron to review the intake form Low
• Check uikings theme and give customer support Medium
• Start making a presentation High

Use Bootstrap’s checkboxes within list group items and customize as needed.

Use Bootstrap’s radios within list group items and customize as needed.

Use icons to any list group item to show icons to list group items.

• Send the billing agreement
• Send over all the documentation.
• Meeting with daron to review the intake form
• Check uikings theme and give customer support
• Start making a presentation

Use list-group-numbered class (optionally use an <ol> element) to show numbered list group items.

1. Send the billing agreement
2. Send over all the documentation.
3. Meeting with daron to review the intake form
4. Check uikings theme and give customer support
5. Start making a presentation

Add nearly any HTML within, even for linked list groups like the one below, with the help of flexbox utilities.