Bootstrap 5 List Groups

Flexible component for displaying lists

📋 What are List Groups?

List groups display a series of content in a flexible and powerful component. They can contain simple text, links, buttons, or complex custom content with badges, icons, and contextual styling options. 


<!-- Basic List Group -->
<ul class="list-group">
  <li class="list-group-item">First item</li>
  <li class="list-group-item">Second item</li>
  <li class="list-group-item">Third item</li>
</ul>

Output:

  • First item
  • Second item
  • Third item

Active and Disabled Items

Active and disabled states provide essential visual feedback about interactive elements' current status. The .active class highlights the current selection or page location, improving user orientation within your interface. The .disabled class makes items non-interactive, indicating unavailable options or actions that cannot be performed. These states are crucial for form controls, navigation menus, and button groups. Proper implementation enhances user understanding of interface functionality, reduces errors, and creates a more intuitive experience. From an SEO perspective, clear interface states improve user engagement metrics and reduce frustration, signaling to search engines that your site provides a positive user experience.

<ul class="list-group">
  <li class="list-group-item active">Active item</li>
  <li class="list-group-item">Regular item</li>
  <li class="list-group-item disabled">Disabled item</li>
  <li class="list-group-item">Another item</li>
</ul>

Output:

  • Active item
  • Regular item
  • Disabled item
  • Another item

🔹 Actionable List Groups

Actionable list groups transform static lists into interactive navigation elements using anchor tags or button elements. Adding the .list-group-item-action class provides hover effects and cursor changes that clearly indicate clickable items. This pattern is ideal for navigation menus, settings panels, selection interfaces, and any scenario where users need to choose from multiple options. Interactive lists improve engagement by providing immediate visual feedback. They also enhance accessibility when paired with proper semantic HTML and ARIA attributes. Well-designed actionable lists contribute to better site navigation structure, which search engines evaluate when crawling and indexing your content hierarchy.

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action active">
    Active link item
  </a>
  <a href="#" class="list-group-item list-group-item-action">
    Link item
  </a>
  <a href="#" class="list-group-item list-group-item-action">
    Another link item
  </a>
  <a href="#" class="list-group-item list-group-item-action disabled">
    Disabled link item
  </a>
</div>

Output:

Active link item Link item Another link item Disabled link item

🔹 Contextual Classes

Contextual classes apply semantic color coding to list items, conveying meaning through visual indicators. Classes like .list-group-item-success, .list-group-item-danger, .list-group-item-warning, and .list-group-item-info help users quickly identify statuses, categories, or priorities at a glance. This visual coding system improves content scannability and reduces cognitive load. For example, success states might indicate completed items, while danger states highlight errors or warnings. These visual cues work alongside text content to reinforce meaning. From an SEO standpoint, improved content comprehension leads to longer session durations and better engagement metrics, both positive ranking factors.

<ul class="list-group">
  <li class="list-group-item">Default item</li>
  <li class="list-group-item list-group-item-primary">Primary item</li>
  <li class="list-group-item list-group-item-success">Success item</li>
  <li class="list-group-item list-group-item-danger">Danger item</li>
  <li class="list-group-item list-group-item-warning">Warning item</li>
  <li class="list-group-item list-group-item-info">Info item</li>
</ul>

Output:

  • Default item
  • Primary item
  • Success item
  • Danger item
  • Warning item
  • Info item

🔹 List Groups with Badges

List groups with badges combine textual content with numerical indicators using Bootstrap's badge component. Use flexbox utilities to position badges on the right side of list items, creating a clean alignment. This pattern is commonly used for notification counts, unread message indicators, inventory quantities, or any supplementary numeric data. Badges provide additional context without cluttering the main content. Ensure badges use appropriate contrast and sizing for accessibility. This design pattern improves information density while maintaining readability. Well-implemented badge systems can increase user interaction with notifications and alerts, potentially improving engagement signals that search engines monitor.

<ul class="list-group">
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Inbox
    <span class="badge bg-primary rounded-pill">14</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Drafts
    <span class="badge bg-secondary rounded-pill">2</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Sent
    <span class="badge bg-success rounded-pill">8</span>
  </li>
</ul>

Output:

  • Inbox 14
  • Drafts 2
  • Sent 8

🔹 Horizontal List Groups

Horizontal list groups arrange items side-by-side using .list-group-horizontal or responsive variants like .list-group-horizontal-md. This layout works well for navigation tabs, category filters, or inline selection interfaces. Horizontal lists automatically stack vertically on smaller screens for optimal mobile usability, ensuring responsive design across all devices. The horizontal format conserves vertical space while providing clear visual separation between items. This approach improves content organization and scanability, particularly for filtering interfaces or tabbed navigation. Responsive horizontal lists contribute to better mobile user experience, a critical factor in Google's mobile-first indexing and overall SEO performance.

<ul class="list-group list-group-horizontal">
  <li class="list-group-item">Item 1</li>
  <li class="list-group-item">Item 2</li>
  <li class="list-group-item">Item 3</li>
</ul>

<ul class="list-group list-group-horizontal-md mt-3">
  <li class="list-group-item">Responsive 1</li>
  <li class="list-group-item">Responsive 2</li>
  <li class="list-group-item">Responsive 3</li>
</ul>

Output:

  • Item 1
  • Item 2
  • Item 3
  • Responsive 1
  • Responsive 2
  • Responsive 3

🧠 Test Your Knowledge

Which class makes list items clickable with hover effects?