diff options
| -rw-r--r-- | scss/_list-group.scss | 11 | ||||
| -rw-r--r-- | site/content/docs/5.0/components/list-group.md | 42 | ||||
| -rw-r--r-- | site/content/docs/5.0/forms/layout.md | 2 | ||||
| -rw-r--r-- | site/content/docs/5.0/migration.md | 4 |
4 files changed, 58 insertions, 1 deletions
diff --git a/scss/_list-group.scss b/scss/_list-group.scss index 7e23b8e0c0..2193168c52 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 1ac5a9a2b9..6cad46a4de 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 >}} +## Numbered + +Add the `.list-group-numbered` modifier class (and optionally use an `<ol>` element) 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 list-group-numbered"> + <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 list-group-numbered"> + <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.** diff --git a/site/content/docs/5.0/forms/layout.md b/site/content/docs/5.0/forms/layout.md index f0fc0b582f..47e2f8ab7b 100644 --- a/site/content/docs/5.0/forms/layout.md +++ b/site/content/docs/5.0/forms/layout.md @@ -292,7 +292,7 @@ You can then remix that once again with size-specific column classes. ## Inline forms -Use the `.col-auto` class to create horizontal layouts. By adding [gutter modifier classes]({{< docsref "/layout/gutters" >}}), we'll have gutters in horizontal and vertical directions. The `.align-items-center` aligns the form elements to the middle, making the `.form-checkbox` align properly. +Use the `.row-cols-*` classes to create responsive horizontal layouts. By adding [gutter modifier classes]({{< docsref "/layout/gutters" >}}), we'll have gutters in horizontal and vertical directions. On narrow mobile viewports, the `.col-12` helps stack the form controls and more. The `.align-items-center` aligns the form elements to the middle, making the `.form-checkbox` align properly. {{< example >}} <form class="row row-cols-lg-auto g-3 align-items-center"> diff --git a/site/content/docs/5.0/migration.md b/site/content/docs/5.0/migration.md index 3e5fb22e11..6eaca9f96a 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: |