Bootstrap4C

A selection of lightweight Bootstrap 4 UI components.

← Back
View on GitHub

Custom switch

bootstrap4c-custom-switch 
<div class="custom-switch">
  <input class="custom-switch-input" id="ADD_ID_HERE" type="checkbox">
  <label class="custom-switch-btn" for="ADD_ID_HERE"></label>
</div>
I'm checked
I'm unchecked 
<div class="custom-switch custom-switch-label-yesno">
  <input class="custom-switch-input" id="ADD_ID_HERE" type="checkbox">
  <label class="custom-switch-btn" for="ADD_ID_HERE"></label>
  <div class="custom-switch-content-checked">
    I'm checked
  </div>
  <div class="custom-switch-content-unchecked">
    I'm unchecked
  </div>
</div>
<div class="custom-switch custom-switch-label-io">
  <input class="custom-switch-input" id="ADD_ID_HERE" type="checkbox">
  <label class="custom-switch-btn" for="ADD_ID_HERE"></label>
</div>
<div class="custom-switch custom-switch-label-onoff">
  <input class="custom-switch-input" id="ADD_ID_HERE" type="checkbox">
  <label class="custom-switch-btn" for="ADD_ID_HERE"></label>
</div>