List group

Bootstrap 5.3 flexible lists for navigation, settings, and selectable rows. Items use --bs-body-bg, --bs-border-color, and action hover surfaces so light and dark themes stay legible. Elementer extras (soft rows, stripes, pill shell, charcoal panel) are scoped under .list-group-page-bs5.

Semantics & actions

Use <ul class="list-group"> for static lists, anchors with .list-group-item-action for navigation, or type="button" for in-page toggles. Mark the current row with aria-current="true" on .active items.

List group docs

Basic

Static list

  • Inbox
  • Drafts
  • Sent
  • Archive

Disabled

Non-interactive rows

  • Quota locked
  • Shared drive
  • Personal

Prefer aria-disabled="true" on static items; use disabled on button actions.

Links

.list-group-item-action

Account overview Security Notifications Billing (soon)

Buttons

Same visuals, button semantics

Flush

Edge-to-edge in cards

  • Sync status · OK
  • Last backup · 2h ago
  • Devices · 4 linked

Numbered

.list-group-numbered

  1. Create project
    Name and region
    1
  2. Invite team
    Email invitations
  3. Go live
    DNS & SSL

Horizontal

Responsive toolbar row

.list-group-horizontal-md stacks on small screens and aligns in a row from the md breakpoint.

  • Text
  • Media
  • Table
  • Embed

Contextual

Semantic color variants

  • Default
  • Primary
  • Success
  • Danger
  • Warning
  • Info
  • Light
  • Dark
Neutral link Primary action Success action Danger action Secondary action

Badges & counts

Trailing pills

  • Open issues 14
  • Pull requests 2
  • Mentions 1

Rich rows

Heading + body + meta

Deployment succeeded

2m ago

Production is serving build #4821 with zero downtime.

Region · EU-West

Queued review

1h ago

Security scan waiting for approval from an admin.

Policy · SOC2

Checkboxes

Multi-select list

Radios

Single choice

JavaScript tabs

List group + panes

data-bs-toggle="list" connects anchors to .tab-pane targets. Below: stacked on mobile, side-by-side from md.

Home panel

Overview metrics and shortcuts. Panel background follows the active color mode.

Profile panel

Avatar, bio, and social links would live here.

Messages panel

Thread list or empty state content.

Elementer · soft

Separated tint rows

Loose items with translucent fills — class .list-group-soft on the list wrapper.

  • In progress
  • Shipped
  • Blocked

Elementer · striped

Zebra density

  • Row A
  • Row B
  • Row C
  • Active row
  • Row E

Section labels

Non-clickable headers

Leading icons

Media + copy

  • Automation
    12 active workflows
  • Security
    MFA enforced
  • Analytics
    Last sync · 5m

Pill shell

Inset rounded stack

Inputs inside

Inline field row

  • Visibility

Charcoal surface

Fixed dark panel

The .list-on-dark wrapper keeps contrast independent of document theme — useful for previewing “always dark” sidebars.

Reference

Bootstrap utilities cheat-sheet

Combine .d-flex, .justify-content-between, .align-items-center, .gap-*, and .w-100 for dense toolbars. Use .list-group-item-primary etc. sparingly — prefer neutral lists plus badges for scan-friendly settings UIs.