Bootstrap 5 Checks and radios Default (stacked)
Last Updated :
01 Dec, 2022
behaviorBootstrap 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 behaviour of Bootstrap 5 Checks and radios.
Bootstrap 5 Checks and radios Default (stacked) Class: There is no pre-defined class to create the stacks we just need to put multiple checks and radios one by one that will stack them up.
Syntax:
<div class="form-check">
<input class="form-check-input"
type="checkbox" value="">
<label class="form-check-label" for="inputID">
...
</label>
</div>
Below examples illustrate the Bootstrap 5 Checks and radios Default (stacked):
Example 1: In this example, we will learn about Stacked Checkboxes.
HTML
<!DOCTYPE html>
< html >
< head >
< link href =
rel = "stylesheet"
integrity =
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin = "anonymous" >
< script src =
integrity =
"sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin = "anonymous" >
</ script >
</ head >
< body class = "m-2" >
< div >
< h1 class = "text-success" >
GeeksforGeeks
</ h1 >
< h2 > Checks and radios Default (stacked)</ h2 >
< div class = "form-check" >
< input class = "form-check-input"
type = "checkbox" >
< label class = "form-check-label" >
Queue
</ label >
</ div >
< div class = "form-check" >
< input class = "form-check-input"
type = "checkbox"
disabled>
< label class = "form-check-label" >
Stack
</ label >
</ div >
< div class = "form-check" >
< input class = "form-check-input"
type = "checkbox" >
< label class = "form-check-label" >
Linked List
</ label >
</ div >
</ div >
</ body >
</ html >
|
Output:
Bootstrap 5 Checks and radios Default (stacked)
Example 2: In this example, we will learn about Stacked Radio Buttons.
HTML
<!DOCTYPE html>
< html >
< head >
< link href =
rel = "stylesheet"
integrity =
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin = "anonymous" >
< script src =
integrity =
"sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin = "anonymous" >
</ script >
</ head >
< body class = "m-2" >
< div >
< h1 class = "text-success" >
GeeksforGeeks
</ h1 >
< h2 >Checks and radios Default (stacked)</ h2 >
< div class = "form-check" >
< input class = "form-check-input"
type = "radio" >
< label class = "form-check-label" >
Stack
</ label >
</ div >
< div class = "form-check" >
< input class = "form-check-input"
type = "radio" >
< label class = "form-check-label" >
Queue
</ label >
</ div >
< div class = "form-check" >
< input class = "form-check-input"
type = "radio" disabled>
< label class = "form-check-label" >
Linked List
</ label >
</ div >
</ div >
</ body >
</ html >
|
Output:
Bootstrap 5 Checks and radios Default (stacked)
Reference: https://getbootstrap.com/docs/5.0/forms/checks-radios/#default-stacked
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...