Bootstrap 5 Checks and Radios
Last Updated :
15 Dec, 2022
Bootstrap 5 provides us with utility Checks and radios. This utility is used for creating checkboxes and radio without using CSS.
Bootstrap 5 Checks and Radios:
- Checks: The checkboxes are used for selecting one or several options in a list.
- Radios: The radios are for selecting one option from many options.
- Switches: Switch in general gives the user an option to select one of the two possibilities present.
- Default (stacked): Bootstrap 5 Checks and radios Default (stacked) is used to create a stack of checks and radios as a list. To create a stack we need to put the checks and radios normally one by one that will create stacks it’s the default behavior of Bootstrap 5 Checks and radios.
- Inline: For adding checks and radios in one horizontal row add .form-check-inline class.
- Toggle buttons: With the help of this utility you can create checkboxes and radio buttons without using the .form-check-label class, but by using .btn styles.
- Without labels: This utility is used when we need to create checkboxes and radios without any label text.
Example 1: Let’s see an example of Bootstrap 5 Checks and radios by creating checks.
HTML
<!DOCTYPE html>
< html >
< head >
< link rel = "stylesheet"
href =
crossorigin = "anonymous" >
</ head >
< body class = "m-3" >
< h1 class = "text-success" >
GeeksforGeeks
</ h1 >
< h3 >Bootstrap5 Checks and radios</ h3 >
< br >
< div class = "form-check" >
< input class = "form-check-input"
type = "checkbox" >
< label >GFG Checkbox 1</ label >
</ div >
< div class = "form-check" >
< input class = "form-check-input"
type = "checkbox" checked>
< label >GFG Checkbox 2</ label >
</ div >
</ body >
</ html >
|
Output:
Example 2: Let’s see an example of Bootstrap 5 checks and radios by creating radios.
HTML
<!DOCTYPE html>
< html >
< head >
< link rel = "stylesheet"
href =
crossorigin = "anonymous" >
</ head >
< body class = "m-4" >
< h1 class = "text-success" >
GeeksforGeeks
</ h1 >
< h3 >Bootstrap5 Checks and radios</ h3 >
< br >
< div class = "form-check" >
< input class = "form-check-input"
type = "radio" name = "flexRadioDefault"
checked>
< label >
GFG Radio 1
</ label >
</ div >
< div class = "form-check" >
< input class = "form-check-input"
type = "radio" name = "flexRadioDefault" >
< label >
GFG radio 2
</ label >
</ div >
</ body >
</ html >
|
Output:
Reference: https://getbootstrap.com/docs/5.0/forms/checks-radios/
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...