--- layout: docs 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. group: components toc: true --- ## 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. {{< example >}} {{< /example >}} ## Active items Add `.active` to a `.list-group-item` to indicate the current active selection. {{< example >}} {{< /example >}} ## Disabled items Add `.disabled` to a `.list-group-item` to make it _appear_ disabled. Note that some elements with `.disabled` will also require custom JavaScript to fully disable their click events (e.g., links). {{< example >}} {{< /example >}} ## Links and buttons Use ``s or ` {{< /example >}} ## 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). {{< example >}} {{< /example >}} ## 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`. {{< example >}}
        1. A list item
        2. A list item
        3. A list item
        {{< /example >}} These work great with custom content as well. {{< example >}}
        1. Subheading
          Content for list item
          14
        2. Subheading
          Content for list item
          14
        3. Subheading
          Content for list item
          14
        {{< /example >}} ## 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. {{< example >}} {{< list-group.inline >}} {{- range $.Site.Data.breakpoints }}
        • An item
        • A second item
        • A third item
        {{- end -}} {{< /list-group.inline >}} {{< /example >}} ## Variants {{< callout info >}} **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). {{< /callout >}} Use contextual classes to style list items with a stateful background and color. {{< example >}}
        • A simple default list group item
          • {{< list.inline >}} {{- range (index $.Site.Data "theme-colors") }}
        • A simple {{ .name }} list group item
          • {{- end -}} {{< /list.inline >}}
        {{< /example >}} ### For links and buttons Contextual classes also work with `.list-group-item-action` for `        ` and `