Bootstrap 5 Checkbox and radio button groups
Last Updated :
07 Dec, 2022
Bootstrap5 checkbox and radio button group provide to combine the button, such as checkbox and radio toggle buttons in a button group, by implementing the .btn-group class.
Checkbox and Radio Button Group Classes:
- .btn-group: This class is used to combine buttons.
- .btn-check: This class is used to create checkable type buttons.
Syntax:
<section class="btn-group">
<input type="checkbox"
class="btn-check"/>
...
</section>
Example 1: This example describes the use of the radio button groups in Bootstrap 5.
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet"
href=
crossorigin="anonymous">
</head>
<body>
<h1 class="text-success">
GeeksforGeeks
</h1>
<h3>
Bootstrap 5 Checkbox and radio button groups
</h3>
<br>
<section class="btn-group">
<input type="radio"
class="btn-check"
name="btnradio"
id="gfg" checked>
<label class="btn btn-outline-danger"
for="gfg">
GFG Radio 1
</label>
<input type="radio"
class="btn-check"
name="btnradio"
id="gfg2">
<label class="btn btn-outline-danger"
for="gfg2">
GFG Radio 2
</label>
<input type="radio"
class="btn-check"
name="btnradio"
id="gfg3">
<label class="btn btn-outline-danger"
for="gfg3">
GFG Radio 3
</label>
</section>
</body>
</html>
|
Output:
Example 2: This example describes the use of the checkbox button groups in Bootstrap 5.
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet"
href=
crossorigin="anonymous">
</head>
<body>
<h1 class="text-success">
GeeksforGeeks
</h1>
<h3>
Bootstrap 5 Checkbox and radio button groups
</h3>
<br>
<section class="btn-group">
<input type="checkbox"
class="btn-check"
id="gfg1">
<label class="btn btn-outline-success"
for="gfg1">
GFG Checkbox 1
</label>
<input type="checkbox"
class="btn-check"
id="gfg2">
<label class="btn btn-outline-success"
for="gfg2">
GFG Checkbox 2
</label>
<input type="checkbox"
class="btn-check"
id="gfg3">
<label class="btn btn-outline-success"
for="gfg3">
GFG Checkbox 3
</label>
</section>
</body>
</html>
|
Output:
Reference: https://getbootstrap.com/docs/5.0/components/button-group/#checkbox-and-radio-button-groups
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...