List Group
Basic example
The most basic list group is an unordered list with list items and the proper classes. Build upon it with the options that follow, or with your own CSS as needed.
- Slack Collaboration
- Nextcloud File Sharing
- Zoom Video Meetings
- Stripe Billing System
Active Items
Add .active to a .list-group-item to indicate the current active selection.
- Slack Collaboration
- Nextcloud File Sharing
- Zoom Video Meetings
- Stripe Billing System
Disabled Items
Add .disabled to a .list-group-item to make it appear disabled.
- Slack Collaboration
- Nextcloud File Sharing
- Zoom Video Meetings
- Stripe Billing System
Links and Buttons
Use <a>s or <button>s to create actionable list group items with hover, disabled, and active states by adding .list-group-item-action.
- Slack Collaboration
- Nextcloud File Sharing
- Zoom Video Meetings
- Stripe Billing System
Flush
Add .list-group-flush to remove some borders and rounded corners to render list group items edge-to-edge in a parent container (e.g., cards).
- Slack Collaboration
- Nextcloud File Sharing
- Zoom Video Meetings
- Stripe Billing System
Numbered
Numbers are generated by counter-reset on the <ol>, and then styled and placed with a ::before psuedo-element on the <li> with counter-increment and content.
- 1. Slack Collaboration
- 2. Nextcloud File Sharing
- 3. Zoom Video Meetings
- 4. Stripe Billing System