diff options
| -rw-r--r-- | scss/_list-group.scss | 13 | ||||
| -rw-r--r-- | site/content/docs/5.0/components/list-group.md | 42 |
2 files changed, 55 insertions, 0 deletions
diff --git a/scss/_list-group.scss b/scss/_list-group.scss index 7e23b8e0c..ecacb05f2 100644 --- a/scss/_list-group.scss +++ b/scss/_list-group.scss @@ -12,6 +12,19 @@ @include border-radius($list-group-border-radius); } +// stylelint-disable selector-no-qualifying-type +ol.list-group { + list-style-type: none; + counter-reset: section; + + > li::before { + // Increments only this instance of the section counter + content: counters(section, ".") ". "; + counter-increment: section; + } +} +// stylelint-enable selector-no-qualifying-type + // 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 1ac5a9a2b..4caaeb8de 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 </ul> {{< /example >}} +## Ordered list + +Replace the unordered list element with an ordered list to opt into numbered list group items. Numbers are generated via CSS (as opposed to a `<ol>`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 `<ol>`, and then styled and placed with a `::before` psuedo-element on the `<li>` with `counter-increment` and `content`. + +{{< example >}} +<ol class="list-group"> + <li class="list-group-item">Cras justo odio</li> + <li class="list-group-item">Cras justo odio</li> + <li class="list-group-item">Cras justo odio</li> +</ol> +{{< /example >}} + +These work great with custom content as well. + +{{< example >}} +<ol class="list-group"> + <li class="list-group-item d-flex justify-content-between align-items-start"> + <div class="ms-2 me-auto"> + <div class="fw-bold">Subheading</div> + Cras justo odio + </div> + <span class="badge bg-primary rounded-pill">14</span> + </li> + <li class="list-group-item d-flex justify-content-between align-items-start"> + <div class="ms-2 me-auto"> + <div class="fw-bold">Subheading</div> + Cras justo odio + </div> + <span class="badge bg-primary rounded-pill">14</span> + </li> + <li class="list-group-item d-flex justify-content-between align-items-start"> + <div class="ms-2 me-auto"> + <div class="fw-bold">Subheading</div> + Cras justo odio + </div> + <span class="badge bg-primary rounded-pill">14</span> + </li> +</ol> +{{< /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.** |