Open In App

Bootstrap 5 Checks and radios Default (stacked)

Improve
Improve
Like Article
Like
Save
Share
Report

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>
    <!-- Bootstrap CDN -->
    <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)

Bootstrap 5 Checks and radios Default (stacked)

Example 2: In this example, we will learn about Stacked Radio Buttons.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <!-- Bootstrap CDN -->
    <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)

Bootstrap 5 Checks and radios Default (stacked)

Reference: https://getbootstrap.com/docs/5.0/forms/checks-radios/#default-stacked



Last Updated : 01 Dec, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads