Upgrade to Pro
Get access to all features
- Advanced Analytics
- Team Collaboration
- API Access
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.
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.
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.
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.
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.
Button-style list items provide a more prominent interactive feel, perfect for action-oriented lists or menu items.
Flush Style
Remove borders and rounded corners with list-group-flush for a cleaner, minimalist
appearance that integrates seamlessly with container elements.
Numbered Lists
Create ordered lists with automatic numbering using list-group-numbered. Perfect
for step-by-step instructions or prioritized items.
Enhance numbered lists with custom content and badges for richer information display.
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.
Contextual Variants
Use contextual classes to convey meaning through color. Each variant provides visual distinction for different types of content or states.
Interactive Variants
Combine action states with contextual variants to create interactive elements that maintain their semantic meaning.
Badges
Incorporate badges to display counters, status indicators, or other small pieces of metadata alongside list items.
Custom Content
Create rich list items with custom content including headings, paragraphs, and metadata. Perfect for news feeds, notification lists, or detailed menu items.
Selection Controls
Integrate checkboxes and radio buttons for interactive selection functionality. Ideal for task lists, settings menus, or multi-select interfaces.
Use stretched-link to make the entire list item clickable, improving the
interactive area for better usability.