##### Amara Evans

amara@example.com

Pro

### Upgrade to Pro

Get access to all features

- Advanced Analytics
- Team Collaboration
- API Access

Upgrade Now
Upgrade to Pro
Log Out

# List Group Components

List groups are versatile UI components that organize content into clear, manageable lists. Perfect for displaying navigation items, task lists, or content groupings, they offer various styles and interactive options to enhance user experience and information hierarchy.

Design Tip: Enhance usability by using appropriate variants for different content types. Consider using badges for counters, custom content for rich information, and interactive styles for clickable items.

### Basic List Group

Basic list groups provide a clean, structured way to display related items. Each item can be customized with various styles and content types while maintaining consistent spacing and alignment.

Basic List Group Example
Loading...
Basic List Group Example
Loading...

### Active Items

Highlight the current selection or active state using the `active` class. This visual indicator helps users understand their current context within the list.

Active Items Example
Loading...
Active Items Example
Loading...

### Disabled Items

Use the `disabled` class to indicate unavailable or inactive items. This helps manage user expectations by clearly showing which options are not currently accessible.

Disabled Items Example
Loading...
Disabled Items Example
Loading...

### Interactive Elements

Transform list items into interactive elements using `list-group-item-action`. This creates clickable links or buttons with hover states and focus styles.

Interactive Links
Loading...
Interactive Links
Loading...

Button-style list items provide a more prominent interactive feel, perfect for action-oriented lists or menu items.

Interactive Buttons
Loading...
Interactive Buttons
Loading...

### Flush Style

Remove borders and rounded corners with `list-group-flush` for a cleaner, minimalist appearance that integrates seamlessly with container elements.

Flush Style Example
Loading...
Flush Style Example
Loading...

### Numbered Lists

Create ordered lists with automatic numbering using `list-group-numbered`. Perfect for step-by-step instructions or prioritized items.

Simple Numbered List
Loading...
Simple Numbered List
Loading...

Enhance numbered lists with custom content and badges for richer information display.

Advanced Numbered List
Loading...
Advanced Numbered List
Loading...

### Horizontal Layout

Create horizontal list groups using responsive classes like `list-group-horizontal-(sm|md|lg|xl|xxl)`. This layout is perfect for navigation bars or status indicators.

Horizontal Layout Examples
Loading...
Horizontal Layout Examples
Loading...

### Contextual Variants

Use contextual classes to convey meaning through color. Each variant provides visual distinction for different types of content or states.

Contextual Variants
Loading...
Contextual Variants
Loading...

### Interactive Variants

Combine action states with contextual variants to create interactive elements that maintain their semantic meaning.

Interactive Variants
Loading...
Interactive Variants
Loading...

### Badges

Incorporate badges to display counters, status indicators, or other small pieces of metadata alongside list items.

List Group with Badges
Loading...
List Group with Badges
Loading...

### Custom Content

Create rich list items with custom content including headings, paragraphs, and metadata. Perfect for news feeds, notification lists, or detailed menu items.

Custom Content Example
Loading...
Custom Content Example
Loading...

### Selection Controls

Integrate checkboxes and radio buttons for interactive selection functionality. Ideal for task lists, settings menus, or multi-select interfaces.

Checkbox List Group
Loading...
Checkbox List Group
Loading...
Radio Button List Group
Loading...
Radio Button List Group
Loading...

Use `stretched-link` to make the entire list item clickable, improving the interactive area for better usability.

Stretched Link Example
Loading...
Stretched Link Example
Loading...
`ESC`

###### Quick Links

###### Dashboard

Analytics Overview

###### Profile

View your profile

###### Settings

Manage preferences

###### Help Center

Get support

###### Recent Searches

Analytics Dashboard User Settings Email Templates