diff options
-rw-r--r-- | site/content/docs/5.1/examples/list-groups/index.html | 38 | ||||
-rw-r--r-- | site/content/docs/5.1/examples/list-groups/list-groups.css | 25 |
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; +} |