root
/
bootstrap
mirror of https://github.com/twbs/bootstrap.git
1
0
Fork 0
Code Issues Actions 11 Packages Projects Releases Wiki Activity

Add ol.list-group with psuedo-element numbers

This commit is contained in:
Mark Otto 2021-02-12 10:51:18 -08:00 committed by Mark Otto
parent 844aab4295
commit defce83027
2 changed files with 55 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
scss/_list-group.scss
View File

@ -12,6 +12,19 @@
@include border-radius($list-group-border-radius); @include border-radius($list-group-border-radius);
} }
// stylelint-disable selector-no-qualifying-type
ol.list-group {
list-style-type: none;
counter-reset: section;
> li::before {
// Increments only this instance of the section counter
content: counters(section, ".") ". ";
counter-increment: section;
}
}
// stylelint-enable selector-no-qualifying-type
// Interactive list items // Interactive list items
// //

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

@ -94,6 +94,48 @@ Add `.list-group-flush` to remove some borders and rounded corners to render lis
</ul> </ul>
{{< /example >}} {{< /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 ## 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.** 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.**