--- title: List group description: List groups are a flexible and powerful component for displaying a series of content. Modify and extend them to support just about any content within. toc: true --- import { getData } from '@libs/data' ## Basic example The most basic list group is an unordered list with list items and the proper classes. Build upon it with the options that follow, or with your own CSS as needed.
  • An item
  • A second item
  • A third item
  • A fourth item
  • And a fifth one
    • `} /> ## Active items Add `.active` to a `.list-group-item` to indicate the current active selection.
  • An active item
  • A second item
  • A third item
  • A fourth item
  • And a fifth one
    • `} /> ## Links and buttons Use ``s or ` `} /> ## Flush Add `.list-group-flush` to remove some borders and rounded corners to render list group items edge-to-edge in a parent container (e.g., cards).
  • An item
  • A second item
  • A third item
  • A fourth item
  • And a fifth one
    • `} /> ## Numbered Add the `.list-group-numbered` modifier class (and optionally use an `
      ` element) to opt into numbered list group items. Numbers are generated via CSS (as opposed to a `
        `s default browser styling) for better placement inside list group items and to allow for better customization. Numbers are generated by `counter-reset` on the `
          `, and then styled and placed with a `::before` pseudo-element on the `
        1. ` with `counter-increment` and `content`.
        2. A list item
        3. A list item
        4. A list item
        `} /> These work great with custom content as well.
      1. Subheading
        Content for list item
        14
      2. Subheading
        Content for list item
        14
      3. Subheading
        Content for list item
        14
      `} /> ## Horizontal Add `.list-group-horizontal` to change the layout of list group items from vertical to horizontal across all breakpoints. Alternatively, choose a responsive variant `.list-group-horizontal-{sm|md|lg|xl|xxl}` to make a list group horizontal starting at that breakpoint’s `min-width`. Currently **horizontal list groups cannot be combined with flush list groups.** **ProTip:** Want equal-width list group items when horizontal? Add `.flex-fill` to each list group item. `
      • An item
      • A second item
      • A third item
      `)} /> ## Variants **Heads up!** As of v5.3.0, the `list-group-item-variant()` Sass mixin is deprecated. List group item variants now have their CSS variables overridden in [a Sass loop](#sass-loops). Use contextual classes to style list items with a stateful background and color.
    1. A simple default list group item
      2. `, ...getData('theme-colors').map((themeColor) => `
    2. A simple ${themeColor.name} list group item
      3. `), `` ]} /> ### For links and buttons Contextual classes also work with `.list-group-item-action` for `      ` and `