From 5c6e72c6fea2cef2c7e169ed1d68f9146081d246 Mon Sep 17 00:00:00 2001
From: Mark Otto <markdotto@gmail.com>
Date: Wed, 10 Mar 2021 21:49:47 -0800
Subject: [PATCH] Change from element selector to the opt-in class

---
 scss/_list-group.scss                          | 4 +---
 site/content/docs/5.0/components/list-group.md | 8 ++++----
 2 files changed, 5 insertions(+), 7 deletions(-)

diff --git a/scss/_list-group.scss b/scss/_list-group.scss
index ecacb05f28..2193168c52 100644
--- a/scss/_list-group.scss
+++ b/scss/_list-group.scss
@@ -12,8 +12,7 @@
   @include border-radius($list-group-border-radius);
 }
 
-// stylelint-disable selector-no-qualifying-type
-ol.list-group {
+.list-group-numbered {
   list-style-type: none;
   counter-reset: section;
 
@@ -23,7 +22,6 @@ ol.list-group {
     counter-increment: section;
   }
 }
-// stylelint-enable selector-no-qualifying-type
 
 
 // Interactive list items
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>