Open In App

Bootstrap 5 Checks and radios Inline

Improve
Improve
Like Article
Like
Save
Share
Report

Bootstrap 5 Checks and radios Inline can be used to align the checkbox or radio horizontally in the same line.

Bootstrap 5 Checks and radios Inline Class:

  • form-check-inline: This class makes all the checkboxes or radios inline or beside each other which are inside the div having this class.

Syntax:

<div class="form-check form-check-inline">
   ...
</div>

Example 1: This code below demonstrates how we can implement the checkboxes inline and show different toggle states:

HTML




<!doctype html>
<html lang="en">
 
<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="container">
    <h1 class="text-success">
        GeeksforGeeks
    </h1>
    <h4>
        Bootstrap 5 Checks and radios Inline
    </h4>
    <div class="container ">
        <div class="form-check form-check-inline ">
            <input class="form-check-input"
                   type="checkbox"
                   id="defaultSwitch"
                   autocomplete="off">
            <label class="form-check-label" for="defaultSwitch">
                Default Checkbox input
            </label>
        </div>
        <div class="form-check form-check-inline ">
            <input class="form-check-input"
                   type="checkbox" id="checkedSwitch" autocomplete="off"
                   checked>
            <label class="form-check-label" for="checkedSwitch">
                Checked Checkbox input
            </label>
        </div>
    </div>
    <div class="container">
        <div class="form-check form-check-inline">
            <input class="form-check-input"
                   type="checkbox" id="disabledSwitch"
                   disabled>
            <label class="form-check-label" for="disabledSwitch">
                Disabled Checkbox input
            </label>
        </div>
        <div class="form-check form-check-inline ">
            <input class="form-check-input"
                   type="checkbox" id="disabledCheckedSwitch"
                   checked disabled>
            <label class="form-check-label" for="disabledCheckedSwitch">
                Checked and Disabled Checkbox input
            </label>
        </div>
    </div>
</body>
 
</html>


Output:

Bootstrap 5 Checks and radios Inline

Example 2: This code below demonstrates how we can implement the radio inputs inline and show different toggle states the first two radio inputs are for the same input and the other two are for different:

HTML




<!doctype html>
<html lang="en">
    <head>
        <link href=
              rel="stylesheet"
              integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
              crossorigin="anonymous">
       <script src=
                integrity=
"sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
                crossorigin="anonymous">
        </script>
    </head>
    <body>
        <h1 class="m-4 text-success">
            GeeksforGeeks
          </h1>
        <h4 class="ms-4">
            Bootstrap5 Checks and radios Inline
          </h4>
        <div class="container d-flex mt-4 p-4">
            <div class="form-check form-check-inline m->">
                <input class="form-check-input"
                       type="radio"
                       name="options"
                       id="defaultRadioSwitch"
                       autocomplete="off">
                <label class="form-check-label"
                       for="defaultRadioSwitch">
                    Default Radio
                </label>
            </div>
            <div class="form-check form-check-inline m->">
                <input class="form-check-input"
                       type="radio"
                       name="options"
                       id="checkedRadioSwitch"
                       autocomplete="off"
                       checked>
                <label class="form-check-label"
                       for="checkedRadioSwitch">
                    Checked Radio
                </label>
            </div>
            <div class="form-check form-check-inline m->">
                <input class="form-check-input"
                       type="radio"
                       name="option"
                       id="disabledRadioSwitch"
                       disabled>
                <label class="form-check-label"
                       for="disabledRadioSwitch">
                    Disabled Radio
                  </label>
            </div>
            <div class="form-check form-check-inline m->">
                <input class="form-check-input"
                       type="radio"
                       name="option"
                       id="checkedDisabledRadioSwitch"
                       checked
                       disabled>
                <label class="form-check-label"
                       for="checkedDisabledRadioSwitch">
                    Checked and Disabled Radio
                  </label>
            </div>
        </div>
    </body>
</html>


Output:

 

Reference: https://getbootstrap.com/docs/5.1/forms/checks-radios/#inline



Last Updated : 17 Jan, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads