diff options
| author | XhmikosR <[email protected]> | 2021-03-11 08:42:53 +0200 |
|---|---|---|
| committer | GitHub <[email protected]> | 2021-03-11 08:42:53 +0200 |
| commit | 0844bb2385e1c65ab5aa902d0af86cae052fd912 (patch) | |
| tree | 1bb45e9cb45a297e8f61e85891443a099f512360 /site/content/docs/5.0/components/list-group.md | |
| parent | 9cbcbd1c4cdc21f0337f39c23b6b318fae70cf3f (diff) | |
| parent | 6b3254536bac263c39e3a536c3c13945210d91b2 (diff) | |
| download | bootstrap-nav-underline.tar.xz bootstrap-nav-underline.zip | |
Merge branch 'main' into nav-underlinenav-underline
Diffstat (limited to 'site/content/docs/5.0/components/list-group.md')
| -rw-r--r-- | site/content/docs/5.0/components/list-group.md | 42 |
1 files changed, 42 insertions, 0 deletions
diff --git a/site/content/docs/5.0/components/list-group.md b/site/content/docs/5.0/components/list-group.md index 1ac5a9a2b..6cad46a4d 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.** |