List Group
Mon, June 29, 2026

List Group

A flexible and powerful component for displaying a series of content. Use it to display simple lists, navigable links, interactive buttons, badges, custom content, and rich media with contextual styling.

Basic Example

The most basic list group — an unordered list with items.

  • Dashboard Overview
  • Patient Records
  • Appointment Calendar
  • Laboratory Results
  • Income Reports
Active Items

Add .active to a list group item to indicate the current active selection.

  • Dashboard
  • Patients
  • Appointments
  • Laboratory
  • Reports
Disabled Items

Add .disabled to make an item appear muted and non-clickable.

  • Active Module
  • Available Module
  • Restricted — Admin Only
  • Under Maintenance
  • Normal Module
Links

Use <a> tags with .list-group-item-action for hover and focus states on anchor items.

Patient Overview 3 min ago
Robert Banks — Post-Op update
Lab Results Ready 15 min ago
Emily Watson — Diabetes Panel
New Appointment 1 hr ago
Marcus Henderson — Cardiology Archived Record
Buttons

Use <button> elements to create actionable list items without relying on <a> tags.

Flush

Add .list-group-flush to remove borders and rounded corners for edge-to-edge rendering inside a card.

  • MH
    Marcus Henderson
    Cardiology
  • EW
    Emily Watson
    Endocrinology
  • RB
    Robert Banks
    Surgery
  • LC
    Laura Chen
    OB/GYN
Horizontal

Add .list-group-horizontal to display items side by side. Use responsive variants like .list-group-horizontal-md.

Always Horizontal
  • Cardiology
  • Surgery
  • Neurology
  • Pediatrics
Horizontal at MD+ (stacks on mobile)
  • Monday
  • Tuesday
  • Wednesday
  • Thursday
  • Friday
Horizontal Action Links
Overview Vitals Lab Tests Prescriptions Archive
Contextual Classes

Use .list-group-item-{variant} to color items based on severity or status context.

  • Default — No status
  • Primary — Info notice
  • Success — Patient stable
  • Danger — Critical alert
  • Warning — Awaiting review
  • Info — Scheduled scan

Contextual action links with hover states:

Primary link Success link Danger link Warning link Info link
With Badges

Combine .d-flex and .justify-content-between utilities to add badges to any list group item.

  • Inpatients 84
  • Critical Cases 7
  • Today's Appointments 32
  • Pending Lab Tests 15
  • Unpaid Invoices 4
  • New Notifications 3
Custom Content

Embed almost any HTML inside list group items — including avatars, headings, timestamps, and action buttons.

MH
Marcus Henderson 08:00 AM
Cardiology Consultation — Room 204
Confirmed
EW
Emily Watson 10:30 AM
Diabetes Type II — Follow-up
Lab Ready
RB
Robert Banks 2 hrs ago
Post-Op Recovery — Vitals require review
Urgent
LC
Laura Chen 3:15 PM
OB/GYN — Prenatal Week 28 Checkup
Scheduled
Checkboxes & Radios

Add Bootstrap form controls inside list group items for selectable lists.

Checkboxes — Select Departments
Radios — Select Priority
Numbered

Add .list-group-numbered to use generated counters — great for step lists and rankings.

Top Departments by Patients
  1. Cardiology 284
  2. General Medicine 231
  3. Orthopedics 178
  4. Neurology 142
  5. Pediatrics 118
Admission Steps
  1. Register at Reception
    Provide National ID and insurance card
  2. Triage Assessment
    Nurse takes vitals and assigns priority
  3. Physician Consultation
    Doctor reviews history and symptoms
  4. Lab & Imaging Orders
    Tests requested based on diagnosis
  5. Ward Assignment or Discharge
    Patient admitted or prescription issued