Skip to main content

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.

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

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

Badges & counts

Trailing pills

  • Open issues 14
  • Pull requests 2
  • Mentions 1

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.