Bootstrap 5 List group Checkboxes and radios
Bootstrap 5 List group Checkboxes and radios use .list-group and .list-group-item classes to create a list of items. The .list-group class is used with <ul> element and the .list-group-item is used with <li> element. Then create the checkbox and radios in the input element using the type attribute.
Note: In situations where the element’s potential label text is not visible, we can use the aria-label attribute.
Bootstrap 5 List group Checkboxes and radios Classes: No special classes are used in List group Checkboxes and radios. We use classes of List Group, Checkbox and Radio combined to achieve it.
Syntax:
<ul class="list-group"> <li class="list-group-item"> <input class="form-check-input me-1" type="checkbox" value="" aria-label="..."> </li> </ul>
Example 1: In this example, we will learn about List group Checkboxes
HTML
<!DOCTYPE html> < html > < head > <!-- Load Bootstrap --> < link href = "https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel = "stylesheet" integrity = "sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin = "anonymous" > </ head > < body > < div > < h1 class = "text-success" > w3wiki </ h1 > < h2 >List group Checkboxes and radios</ h2 > < div class = "list-group" > < label class = "list-group-item" > < input class = "form-check-input me-1" type = "checkbox" > Java </ label > < label class = "list-group-item" > < input class = "form-check-input me-1" type = "checkbox" > CSS </ label > < label class = "list-group-item" > < input class = "form-check-input me-1" type = "checkbox" > HTML </ label > < label class = "list-group-item" > < input class = "form-check-input me-1" type = "checkbox" > Angular </ label > < label class = "list-group-item" > < input class = "form-check-input me-1" type = "checkbox" > React </ label > </ div > </ div > </ body > </ html > |
Output:
Example 2: In this example, we will learn about list group radio buttons.
HTML
<!DOCTYPE html> < html > < head > < link href = "https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel = "stylesheet" integrity = "sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin = "anonymous" > </ head > < body > < div > < h1 class = "text-success" > w3wiki </ h1 > < h2 >List group Checkboxes and radios</ h2 > < div class = "list-group" > < label class = "list-group-item" > < input class = "form-check-input me-1" type = "radio" name = "GFG" > Java </ label > < label class = "list-group-item" > < input class = "form-check-input me-1" type = "radio" name = "GFG" > CSS </ label > < label class = "list-group-item" > < input class = "form-check-input me-1" type = "radio" name = "GFG" > HTML </ label > < label class = "list-group-item" > < input class = "form-check-input me-1" type = "radio" name = "GFG" > Angular </ label > < label class = "list-group-item" > < input class = "form-check-input me-1" type = "radio" name = "GFG" > React </ label > </ div > </ div > </ body > </ html > |
Output:
References: https://getbootstrap.com/docs/5.0/components/list-group/#checkboxes-and-radios
Contact Us