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
Share your thoughts in the comments
Please Login to comment...