Skip to content

Bootstrap List Groups Explained — Flexible List Components

DodaTech Updated 2026-06-28 1 min read

In this tutorial, you will learn about Bootstrap List Groups Explained. We cover key concepts, practical examples, and best practices to help you master this topic.

Bootstrap list groups are versatile components for displaying lists of items, supporting active/disabled states, links, buttons, badges, and contextual color variants.

What You'll Learn

  • Basic list group
  • Active and disabled items
  • Linked List groups
  • Flush variant
  • Numbered list groups
  • Contextual classes

Why It Matters

List groups replace basic HTML lists with styled, interactive components that support vertical navigation, tabbed interfaces, and action lists.

<div class="container mt-4">
  <div class="row">
    <div class="col-md-4">
      <h3>Basic List Group</h3>
      <ul class="list-group">
        <li class="list-group-item active" aria-current="true">Dashboard</li>
        <li class="list-group-item">Profile</li>
        <li class="list-group-item">Settings</li>
        <li class="list-group-item disabled">Billing (coming soon)</li>
      </ul>
    </div>

    <div class="col-md-4">
      <h3>Linked List Group</h3>
      <div class="list-group">
        <a href="#" class="list-group-item list-group-item-action active">
          Notifications
        </a>
        <a href="#" class="list-group-item list-group-item-action">Messages</a>
        <a href="#" class="list-group-item list-group-item-action disabled">Archived</a>
      </div>
    </div>

    <div class="col-md-4">
      <h3>With Badges</h3>
      <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">
          Spam <span class="badge bg-danger rounded-pill">5</span>
        </li>
      </ul>
    </div>
  </div>

  <h3 class="mt-4">Contextual List Group</h3>
  <ul class="list-group">
    <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>

  <h3 class="mt-4">Numbered List Group</h3>
  <ol class="list-group list-group-numbered">
    <li class="list-group-item">Complete project setup</li>
    <li class="list-group-item">Implement authentication</li>
    <li class="list-group-item">Deploy to production</li>
  </ol>
</div>

Expected output: Multiple list group variants: basic, linked, with badges, contextual colors, and numbered styles.

← Previous Bootstrap Popovers Explained — Rich Information Popups Next → Bootstrap Project — Build a Complete Bootstrap Website

Built by the developers of DodaTech

Doda Browser, DodaZIP & Durga Antivirus Pro

Home Browse Bootstrap