Add another list-group snippet example

2 files changed, 62 insertions, 1 deletions

diff --git a/site/content/docs/5.1/examples/list-groups/index.html b/site/content/docs/5.1/examples/list-groups/index.html
index 9b6e9a0082..36a9441886 100644
--- a/site/content/docs/5.1/examples/list-groups/index.html
+++ b/site/content/docs/5.1/examples/list-groups/index.html
@@ -183,4 +183,40 @@ body_class: ""
     Fourth disabled radio
     <span class="d-block small opacity-50">This option is disabled</span>
   </label>
-</div>
\ No newline at end of file
+</div>
+
+<div class="b-example-divider"></div>
+
+<div class="list-group list-group-radio d-grid gap-2 border-0 w-auto">
+  <div class="position-relative">
+    <input class="form-check-input position-absolute top-50 end-0 me-3 fs-5" type="radio" name="listGroupRadioGrid" id="listGroupRadioGrid1" value="" checked>
+    <label class="list-group-item py-3 pe-5" for="listGroupRadioGrid1">
+      <strong class="fw-semibold">First radio</strong>
+      <span class="d-block small opacity-75">With support text underneath to add more detail</span>
+    </label>
+  </div>
+
+  <div class="position-relative">
+    <input class="form-check-input position-absolute top-50 end-0 me-3 fs-5" type="radio" name="listGroupRadioGrid" id="listGroupRadioGrid2" value="">
+    <label class="list-group-item py-3 pe-5" for="listGroupRadioGrid2">
+      <strong class="fw-semibold">Second radio</strong>
+      <span class="d-block small opacity-75">Some other text goes here</span>
+    </label>
+  </div>
+
+  <div class="position-relative">
+    <input class="form-check-input position-absolute top-50 end-0 me-3 fs-5" type="radio" name="listGroupRadioGrid" id="listGroupRadioGrid3" value="">
+    <label class="list-group-item py-3 pe-5" for="listGroupRadioGrid3">
+      <strong class="fw-semibold">Third radio</strong>
+      <span class="d-block small opacity-75">And we end with another snippet of text</span>
+    </label>
+  </div>
+
+  <div class="position-relative">
+    <input class="form-check-input position-absolute top-50 end-0 me-3 fs-5" type="radio" name="listGroupRadioGrid" id="listGroupRadioGrid4" value="" disabled>
+    <label class="list-group-item py-3 pe-5" for="listGroupRadioGrid4">
+      <strong class="fw-semibold">Fourth disabled radio</strong>
+      <span class="d-block small opacity-75">This option is disabled</span>
+    </label>
+  </div>
+</div>
diff --git a/site/content/docs/5.1/examples/list-groups/list-groups.css b/site/content/docs/5.1/examples/list-groups/list-groups.css
index d5718b5918..218508412b 100644
--- a/site/content/docs/5.1/examples/list-groups/list-groups.css
+++ b/site/content/docs/5.1/examples/list-groups/list-groups.css
@@ -34,3 +34,28 @@
   filter: none;
   opacity: .5;
 }
+
+.list-group-radio .list-group-item {
+  cursor: pointer;
+  border-radius: .5rem;
+}
+.list-group-radio .form-check-input {
+  z-index: 2;
+  margin-top: -.5em;
+}
+.list-group-radio .list-group-item:hover,
+.list-group-radio .list-group-item:focus {
+  background-color: var(--bs-light);
+}
+
+.list-group-radio .form-check-input:checked + .list-group-item {
+  background-color: var(--bs-body);
+  border-color: var(--bs-blue);
+  box-shadow: 0 0 0 2px var(--bs-blue);
+}
+.list-group-radio .form-check-input[disabled] + .list-group-item,
+.list-group-radio .form-check-input:disabled + .list-group-item {
+  pointer-events: none;
+  filter: none;
+  opacity: .5;
+}