Keen | Bootstrap Switch

HTML
JS


       <div class="card card-custom">
        <div class="card-header">
         <h3 class="card-title">
          Bootstrap Switch Examples
         </h3>
        </div>
        <!--begin::Form-->
        <form class="form">
         <div class="card-body">
          <div class="form-group row">
           <label class="col-form-label text-right col-lg-3 col-sm-12">Basic Example</label>
           <div class="col-lg-9 col-md-9 col-sm-12">
            <input data-switch="true" type="checkbox" checked="checked" />
            <input data-switch="true" type="checkbox" />
           </div>
          </div>
          <div class="form-group row">
           <label class="col-form-label text-right col-lg-3 col-sm-12">State Colors</label>
           <div class="col-lg-9 col-md-9 col-sm-12">
            <input data-switch="true" type="checkbox"  checked="checked" data-on-color="success" data-off-color="warning"/>
            <input data-switch="true" type="checkbox" checked="checked" data-on-color="primary"/>
            <input data-switch="true" type="checkbox" checked="checked" data-on-color="danger"/>
            <input data-switch="true" type="checkbox" checked="checked" data-on-color="info"/>
           </div>
          </div>
          <div class="form-group row">
           <label class="col-form-label text-right col-lg-3 col-sm-12">Custom Label</label>
           <div class="col-lg-9 col-md-9 col-sm-12">
            <input data-switch="true" type="checkbox" checked="checked" data-on-text="True" data-handle-width="50" data-off-text="False" data-on-color="success"/>
            <input data-switch="true" type="checkbox" checked="checked" data-on-text="1" data-handle-width="30" data-off-text="0" data-on-color="info" />
            <input data-switch="true" type="checkbox" checked="checked" data-on-text="Enabled" data-handle-width="70" data-off-text="Disabled" data-on-color="primary" />
           </div>
          </div>
          <div class="form-group row">
           <label class="col-form-label text-right col-lg-3 col-sm-12">Disabled State</label>
           <div class="col-lg-9 col-md-9 col-sm-12">
            <input data-switch="true" type="checkbox" checked="checked" disabled="disabled"/>
            <input data-switch="true" type="checkbox" disabled="disabled"/>
           </div>
          </div>
          <div class="form-group row">
           <label class="col-form-label text-right col-lg-3 col-sm-12">Sizing</label>
           <div class="col-lg-9 col-md-9 col-sm-12">
            <input data-switch="true" data-size="small" type="checkbox" checked="checked" />
            <input data-switch="true" type="checkbox" checked="checked" />
            <input data-switch="true" data-size="large" type="checkbox" checked="checked" />
           </div>
          </div>
          <div class="form-group row">
           <label class="col-form-label text-right col-lg-3 col-sm-12">Modal Demos</label>
           <div class="col-lg-9 col-md-9 col-sm-12">
            <a href="" class="btn btn-light-danger font-weight-bold" data-toggle="modal" data-target="#kt_switch_modal">Launch switches on modal</a>
           </div>
          </div>
         </div>
         <div class="card-footer">
          <div class="row">
           <div class="col-lg-9 ml-lg-auto">
            <button type="reset" class="btn btn-primary mr-2">Submit</button>
            <button type="reset" class="btn btn-secondary">Cancel</button>
           </div>
          </div>
         </div>
        </form>
        <!--end::Form-->
       </div>


      // Class definition

      var KTBootstrapSwitch = function() {

      // Private functions
      var demos = function() {
       // minimum setup
       $('[data-switch=true]').bootstrapSwitch();
      };

      return {
       // public functions
       init: function() {
       demos();
       },
      };
      }();

      jQuery(document).ready(function() {
      KTBootstrapSwitch.init();
      });

Custom

Layout

features

Bootstrap Switch

Bootstrap Switch Examples

Search files, reports, members

Quick Actions finance & reports

User Profile 15 messages

Recent Notifications

Important Notice

System Update

Server Maintenance

DB Migration

System Messages

Notifications

Privacy Settings:

Security Settings:

Select A Demo

Demo 1

Demo 2

Demo 3

Demo 4

Demo 5

Demo 6

Demo 7

Demo 8

Demo 9