diff options
| author | Mark Otto <markdotto@gmail.com> | 2021-03-11 08:49:47 +0300 |
|---|---|---|
| committer | Mark Otto <otto@github.com> | 2021-03-11 09:04:32 +0300 |
| commit | 5c6e72c6fea2cef2c7e169ed1d68f9146081d246 (patch) | |
| tree | d8daeade3b748d25b15423604b04e81f6cd94799 /site/content/docs/5.0 | |
| parent | defce830276d04238350c2b738b1d02197c6e37d (diff) | |
Change from element selector to the opt-in class
Diffstat (limited to 'site/content/docs/5.0')
| -rw-r--r-- | site/content/docs/5.0/components/list-group.md | 8 |
1 files changed, 4 insertions, 4 deletions
diff --git a/site/content/docs/5.0/components/list-group.md b/site/content/docs/5.0/components/list-group.md index 4caaeb8de7..6cad46a4de 100644 --- a/site/content/docs/5.0/components/list-group.md +++ b/site/content/docs/5.0/components/list-group.md @@ -94,14 +94,14 @@ Add `.list-group-flush` to remove some borders and rounded corners to render lis </ul> {{< /example >}} -## Ordered list +## Numbered -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. +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"> +<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> @@ -111,7 +111,7 @@ Numbers are generated by `counter-reset` on the `<ol>`, and then styled and plac These work great with custom content as well. {{< example >}} -<ol class="list-group"> +<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> |