--- 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 >}} ## Contextual classes 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 >}} Contextual classes also work with `.list-group-item-action`. Note the addition of the hover styles here not present in the previous example. Also supported is the `.active` state; apply it to indicate an active selection on a contextual list group item. {{< 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 >}} {{< callout info >}} {{< partial "callout-warning-color-assistive-technologies.md" >}} {{< /callout >}} ## With badges Add badges to any list group item to show unread counts, activity, and more with the help of some [utilities]({{< docsref "/utilities/flex" >}}). {{< example >}}
        • A list item 14
        • A second list item 2
        • A third list item 1
        {{< /example >}} ## Custom content Add nearly any HTML within, even for linked list groups like the one below, with the help of [flexbox utilities]({{< docsref "/utilities/flex" >}}). {{< example >}} {{< /example >}} ## Checkboxes and radios Place Bootstrap's checkboxes and radios within list group items and customize as needed. You can use them without `