learn code with examples

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.

  1. Create div class="form-check form-switch" to form pair of input type="checkbox" and label.
  2. Use class="form-check-input" for input type="checkbox".
  3. Use class="form-check-label" for label.
<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>

  • Bootstrap classes recognizes following cases and defines/updates style for it.
    • If disabled attribute is present, it updates style. Example

In this page...

Copyright © All rights reserved.