mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-29 16:19:53 +02:00
Code Issues Releases Wiki Activity

Change from element selector to the opt-in class

Browse Source
This commit is contained in:
Mark Otto
2021-03-10 21:49:47 -08:00
committed by Mark Otto
parent defce83027
commit 5c6e72c6fe
2 changed files with 5 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
site/content/docs/5.0/components/list-group.md
View File

@@ -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>