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:
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