diff options
Diffstat (limited to 'site/content/docs/5.2/components/list-group.md')
| -rw-r--r-- | site/content/docs/5.2/components/list-group.md | 67 |
1 files changed, 34 insertions, 33 deletions
diff --git a/site/content/docs/5.2/components/list-group.md b/site/content/docs/5.2/components/list-group.md index 349823a589..d9b2ea200f 100644 --- a/site/content/docs/5.2/components/list-group.md +++ b/site/content/docs/5.2/components/list-group.md @@ -247,53 +247,54 @@ Place Bootstrap's checkboxes and radios within list group items and customize as {{< example >}} <ul class="list-group"> <li class="list-group-item"> - <input class="form-check-input me-1" type="checkbox" value="" aria-label="..."> - First checkbox + <input class="form-check-input me-1" type="checkbox" value="" id="firstCheckbox"> + <label class="form-check-label" for="firstCheckbox">First checkbox</label> </li> <li class="list-group-item"> - <input class="form-check-input me-1" type="checkbox" value="" aria-label="..."> - Second checkbox + <input class="form-check-input me-1" type="checkbox" value="" id="secondCheckbox"> + <label class="form-check-label" for="secondCheckbox">Second checkbox</label> </li> <li class="list-group-item"> - <input class="form-check-input me-1" type="checkbox" value="" aria-label="..."> - Third checkbox + <input class="form-check-input me-1" type="checkbox" value="" id="thirdCheckbox"> + <label class="form-check-label" for="thirdCheckbox">Third checkbox</label> </li> +</ul> +{{< /example >}} + +{{< example >}} +<ul class="list-group"> <li class="list-group-item"> - <input class="form-check-input me-1" type="checkbox" value="" aria-label="..."> - Fourth checkbox + <input class="form-check-input me-1" type="radio" name="listGroupRadio" value="" id="firstRadio" checked> + <label class="form-check-label" for="firstRadio">First radio</label> </li> <li class="list-group-item"> - <input class="form-check-input me-1" type="checkbox" value="" aria-label="..."> - Fifth checkbox + <input class="form-check-input me-1" type="radio" name="listGroupRadio" value="" id="secondRadio"> + <label class="form-check-label" for="secondRadio">Second radio</label> + </li> + <li class="list-group-item"> + <input class="form-check-input me-1" type="radio" name="listGroupRadio" value="" id="thirdRadio"> + <label class="form-check-label" for="thirdRadio">Third radio</label> </li> </ul> {{< /example >}} -And if you want `<label>`s as the `.list-group-item` for large hit areas, you can do that, too. +You can use `.stretched-link` on `<label>`s to make the whole list group item clickable. {{< example >}} -<div class="list-group"> - <label class="list-group-item"> - <input class="form-check-input me-1" type="checkbox" value=""> - First checkbox - </label> - <label class="list-group-item"> - <input class="form-check-input me-1" type="checkbox" value=""> - Second checkbox - </label> - <label class="list-group-item"> - <input class="form-check-input me-1" type="checkbox" value=""> - Third checkbox - </label> - <label class="list-group-item"> - <input class="form-check-input me-1" type="checkbox" value=""> - Fourth checkbox - </label> - <label class="list-group-item"> - <input class="form-check-input me-1" type="checkbox" value=""> - Fifth checkbox - </label> -</div> +<ul class="list-group"> + <li class="list-group-item"> + <input class="form-check-input me-1" type="checkbox" value="" id="firstCheckboxStretched"> + <label class="form-check-label stretched-link" for="firstCheckboxStretched">First checkbox</label> + </li> + <li class="list-group-item"> + <input class="form-check-input me-1" type="checkbox" value="" id="secondCheckboxStretched"> + <label class="form-check-label stretched-link" for="secondCheckboxStretched">Second checkbox</label> + </li> + <li class="list-group-item"> + <input class="form-check-input me-1" type="checkbox" value="" id="thirdCheckboxStretched"> + <label class="form-check-label stretched-link" for="thirdCheckboxStretched">Third checkbox</label> + </li> +</ul> {{< /example >}} ## CSS |