Bootstrap 5 Toggle Switch Example

In today’s tutorial, we will create toggle swatch input using bootstrap 5. Toggle switch component is used for choose on/off boolean value, or active & inactive value. For toggle switch we will not use any custom css classes or any other css library. we will create on / off toggle different color toggle. first you need to setup bootstrap 5 project. you can use cdn or read below article.

How to install & setup bootstrap 5

Bootstrap 5 Toggle Switch Example

1. Bootstrap 5 simple toggle switch.

<div class="form-check form-switch">
  <input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckDefault">
  <label class="form-check-label" for="flexSwitchCheckDefault">Default switch checkbox input</label>
</div>
<div class="form-check form-switch">
  <input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckChecked" checked>
  <label class="form-check-label" for="flexSwitchCheckChecked">Checked switch checkbox input</label>
</div>

Bootstrap 5 toggle switch

2. Bootstrap 5 multiple color toggle switch.

<div class="form-check form-switch">
  <input class="form-check-input opacity-10 bg-warning border border-warning" type="checkbox" role="switch" id="flexSwitchCheckDefault" checked>
  <label class="form-check-label" for="flexSwitchCheckDefault">Yellow switch checkbox input</label>
</div>
<div class="form-check form-switch">
  <input class="form-check-input opacity-10 bg-success border border-success" type="checkbox" role="switch" id="flexSwitchCheckDefault" checked>
  <label class="form-check-label" for="flexSwitchCheckDefault">Green switch checkbox input</label>
</div>
<div class="form-check form-switch">
  <input class="form-check-input opacity-10 bg-danger border border-danger" type="checkbox" role="switch" id="flexSwitchCheckDefault" checked>
  <label class="form-check-label" for="flexSwitchCheckDefault">Red switch checkbox input</label>
</div>
<div class="form-check form-switch">
  <input class="form-check-input opacity-10 bg-dark border border-dark" type="checkbox" role="switch" id="flexSwitchCheckDefault" checked>
  <label class="form-check-label" for="flexSwitchCheckDefault">Drak switch checkbox input</label>
</div>
<div class="form-check form-switch">
  <input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckChecked" checked>
  <label class="form-check-label" for="flexSwitchCheckChecked">Blue switch checkbox input</label>
</div>

bootstrap 5 toggle switch red, green, blue

3. Bootstrap 5 disabled toggle switch.

<div class="form-check form-switch">
  <input class="form-check-input" type="checkbox" id="flexSwitchCheckDisabled" disabled>
  <label class="form-check-label" for="flexSwitchCheckDisabled">Disabled switch checkbox input</label>
</div>
<div class="form-check form-switch">
  <input class="form-check-input" type="checkbox" id="flexSwitchCheckCheckedDisabled" checked disabled>
  <label class="form-check-label" for="flexSwitchCheckCheckedDisabled">Disabled checked switch checkbox input</label>
</div>

Bootstrap 5 disabled toggle switch