Skip to content
Moodle Design Systemby Didactika
Moodle 5.3 LTS
v0.1
EN
Bootstrap components
Didactika theme v0.1

List group

A vertical list of items that can be plain, clickable or carry a status.

A list group presents a series of related items one under the other: a menu, the units of a course, the results of a search. Items can be links or buttons.

When to use it

Use it

  • Use list-group-item-action when the items are links or buttons.
  • Mark the current item as active.
  • Put a badge on the right for a count or a status.

Don't

  • Use it for a table with several columns; use a table.
  • Make some items clickable and others not in the same list.
  • Colour items by meaning without text that says it too.

Anatomy

A container (list-group) of items (list-group-item), each plain, an action (link or button) or contextual (success, warning…). One can be active and some disabled.

Variants and states

Items and actions
  • Active item
  • Second item
  • Third item
  • Disabled item
Dashboard My courses Calendar (hover) Messages (focus) Disabled
With icons and badges
  • Unit 1 · NumbersDone
  • Unit 2 · FunctionsIn progress
  • Unit 3 · EquationsLocked
Flush and contextual
  • Flush item one
  • Flush item two
  • Flush item three
  • A success item
  • A warning item
  • A danger item
  • A info item

Combinations

Combination Use it for
Action list × navigation Items that are links or buttons, one active; for a side menu or a list of results.
List + badge A status or a count on the right of each item.
Flush list × card Inside a card, without its own border or radius.
Contextual × status Colour only when the colour is the status, and with text that says it too.

What Didactika changes and why

What we changed Why it helps
Items have more padding and a hairline between them Rows are easy to scan and to hit, and the list does not look like a stack of boxes.
The active item is filled, hover is a tint, focus is drawn inside The three states are different things, so they never get confused.
The outer corners are rounded and the inner ones are straight The list reads as one surface.

Classes

Class What it does
list-group, list-group-item The list and its items
list-group-item-action Clickable item with hover and focus
active, disabled State of an item
list-group-flush No outer border or radius (inside a card)
list-group-item-success… Contextual colour

In this version

Bootstrap 5.3 keeps its colours in CSS variables (--bs-*), so a theme recolours the component with one variable.

Bootstrap 4.6 compiles its colours into the classes, so a theme recolours the component by rebuilding its stylesheet.

Bootstrap 4.6 compiles its colours into the classes, so a theme recolours the component by rebuilding its stylesheet.

Accessibility

  • Use aria-current="true" on the active item.
  • A clickable item is an a or a button, not a div.
  • A disabled item has aria-disabled="true" and tabindex="-1".