diff options
| author | Mark Otto <markdotto@gmail.com> | 2021-02-12 21:51:18 +0300 |
|---|---|---|
| committer | Mark Otto <otto@github.com> | 2021-03-11 09:04:32 +0300 |
| commit | defce830276d04238350c2b738b1d02197c6e37d (patch) | |
| tree | 4fbb1e67fb26ce66fa9a5e5c3c38aae4b0c8fb22 /site/content/docs/5.0 | |
| parent | 844aab4295bc929f7c38cf558fee4a80e5494d6d (diff) | |
Add ol.list-group with psuedo-element numbers
Diffstat (limited to 'site/content/docs/5.0')
| -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 1ac5a9a2b9..4caaeb8de7 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.** |