Bootstrap Forms Toggle Switch
Example links are referring to Bootstrap official site.
Bootstrap 5 Forms Toggle Switch
Bootstrap 5 changes checkbox icon to toggle switch when below steps are followed.
-
Create
div class="form-check form-switch"
to form pair ofinput type="checkbox"
andlabel
. - Use
class="form-check-input"
forinput type="checkbox"
. - Use
class="form-check-label"
forlabel
.
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="switchId1" checked>
<label class="form-check-label" for="switchId1">Checked Toggle Switch Example</label>
</div>
-
Bootstrap classes recognizes following cases and defines/updates style for it.
- If
disabled
attribute is present, it updates style. Example
- If