diff --git a/scss/_list-group.scss b/scss/_list-group.scss index 7e23b8e0c059..2193168c52fd 100644 --- a/scss/_list-group.scss +++ b/scss/_list-group.scss @@ -12,6 +12,17 @@ @include border-radius($list-group-border-radius); } +.list-group-numbered { + list-style-type: none; + counter-reset: section; + + > li::before { + // Increments only this instance of the section counter + content: counters(section, ".") ". "; + counter-increment: section; + } +} + // Interactive list items // diff --git a/site/content/docs/5.0/components/list-group.md b/site/content/docs/5.0/components/list-group.md index 1ac5a9a2b991..6cad46a4de61 100644 --- a/site/content/docs/5.0/components/list-group.md +++ b/site/content/docs/5.0/components/list-group.md @@ -94,6 +94,48 @@ Add `.list-group-flush` to remove some borders and rounded corners to render lis {{< /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` psuedo-element on the `
      1. ` with `counter-increment` and `content`. + +{{< example >}} +
          +
        1. Cras justo odio
          2. +
        2. Cras justo odio
          3. +
        3. Cras justo odio
          4. +
        +{{< /example >}} + +These work great with custom content as well. + +{{< example >}} +
          +
        1. +
          +
          Subheading
          + Cras justo odio +
          + 14 +
          2. +
        2. +
          +
          Subheading
          + Cras justo odio +
          + 14 +
          3. +
        3. +
          +
          Subheading
          + Cras justo odio +
          + 14 +
          4. +
        +{{< /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.** diff --git a/site/content/docs/5.0/migration.md b/site/content/docs/5.0/migration.md index 3e5fb22e116e..6eaca9f96ae3 100644 --- a/site/content/docs/5.0/migration.md +++ b/site/content/docs/5.0/migration.md @@ -9,6 +9,10 @@ toc: true ## v5.0.0-beta3 +### Components + +- Added new [`.list-group-numbered` modifier]({{< docsref "/components/list-group#numbered" >}}) to list groups. + ### JavaScript - All plugins can now accept a CSS selector as the first argument. You can either pass a DOM element or any valid CSS selector to create a new instance of the plugin: