List Groups

Bootstrap list group component variants, interactive states, and custom content patterns.

Basic List Group
  • An item
  • A second item
  • A third item
  • A fourth item
  • A fifth item
Active & Disabled States
  • Active item
  • Regular item
  • Regular item
  • Disabled item
  • Regular item
Contextual Colors
  • Primary item
  • Secondary item
  • Success item
  • Danger item
  • Warning item
  • Info item
With Badges
  • Inbox 14
  • Sent 2
  • Drafts 7
  • Spam 99+
  • Trash 0
Linked Items
Dashboard Users Reports Settings Billing (disabled)
Checkboxes & Radios
Custom Content — Notifications Feed
JD
John Doe 5 min ago

Left a comment on your post: "Great work on the dashboard design!"
SA
Sarah Adams 1 hr ago

Shared a file with you: Q3_report.pdf
System Alert 3 hrs ago

Your subscription renews in 7 days. Upgrade for more features.
MK
Mike Kowalski Yesterday

Assigned task "Review PR #42" to you.
List Group as Tab Navigation
Home

Welcome back! Here's a quick overview of your account activity and recent updates.

Profile

Manage your personal information, avatar, and account preferences.

Messages

You have 3 unread messages in your inbox. Click to view them.

Settings

Adjust notifications, theme preferences, and security settings here.

Horizontal List Group
  • An item
  • A second item
  • A third item
  • Responsive
  • Horizontal
  • on MD+
  • breakpoint
Numbered List Group
  1. Subheading
    Content for list group item
    14
  2. Subheading
    Content for list group item
    2
  3. Subheading
    Content for list group item
    1
With Icons & Status
  • SSL Certificate
    Valid until Dec 2025
    Active
  • Backup Status
    Last run 3 days ago
    Warning
  • Email Service
    Connection failed
    Error
  • Cache
    Will clear at midnight
    Info