<form class="form">
 <div class="form-group row">
  <label class="col-3 col-form-label">Default Switch</label>
  <div class="col-3">
   <span class="switch">
    <label>
     <input type="checkbox" checked="checked" name="select"/>
     <span></span>
    </label>
   </span>
  </div>
  <label class="col-3 col-form-label">With Icon</label>
  <div class="col-3">
   <span class="switch switch-icon">
    <label>
     <input type="checkbox" checked="checked" name="select"/>
     <span></span>
    </label>
   </span>
  </div>
 </div>
 <div class="form-group row">
  <label class="col-3 col-form-label">Unchecked State</label>
  <div class="col-3">
   <span class="switch">
    <label>
     <input type="checkbox"  name=""/>
     <span></span>
    </label>
   </span>
  </div>
  <label class="col-3 col-form-label">With Icon</label>
  <div class="col-3">
   <span class="switch switch-icon">
    <label>
     <input type="checkbox"  name=""/>
     <span></span>
    </label>
   </span>
  </div>
 </div>
 <div class="form-group row">
  <label class="col-3 col-form-label">Disabled State</label>
  <div class="col-3">
   <span class="switch">
    <label>
     <input type="checkbox" disabled="disabled"/>
     <span></span>
    </label>
   </span>
  </div>
  <label class="col-3 col-form-label">With Icon</label>
  <div class="col-3">
   <span class="switch switch-icon">
    <label>
     <input type="checkbox" disabled="disabled"/>
     <span></span>
    </label>
   </span>
  </div>
 </div>
</form>

<form class="form">
 <div class="form-group row">
  <label class="col-3 col-form-label">Success</label>
  <div class="col-3">
   <span class="switch switch-success">
    <label>
     <input type="checkbox" checked="checked" name="select"/>
     <span></span>
    </label>
   </span>
  </div>
  <label class="col-3 col-form-label">Primary</label>
  <div class="col-3">
   <span class="switch switch-primary">
    <label>
     <input type="checkbox" checked="checked" name="select"/>
     <span></span>
    </label>
   </span>
  </div>
 </div>
 <div class="form-group row">
  <label class="col-3 col-form-label">Info</label>
  <div class="col-3">
   <span class="switch switch-info">
    <label>
     <input type="checkbox" checked="checked" name="select"/>
     <span></span>
    </label>
   </span>
  </div>
  <label class="col-3 col-form-label">Danger</label>
  <div class="col-3">
   <span class="switch switch-danger">
    <label>
     <input type="checkbox" checked="checked" name="select"/>
     <span></span>
    </label>
   </span>
  </div>
 </div>
 <div class="form-group row">
  <label class="col-3 col-form-label">Brand</label>
  <div class="col-3">
   <span class="switch switch-brand">
    <label>
     <input type="checkbox" checked="checked" name="select"/>
     <span></span>
    </label>
   </span>
  </div>
  <label class="col-3 col-form-label">Dark</label>
  <div class="col-3">
   <span class="switch switch-dark">
    <label>
     <input type="checkbox" checked="checked" name="select"/>
     <span></span>
    </label>
   </span>
  </div>
 </div>
</form>

<form class="form">
 <div class="form-group row">
  <label class="col-3 col-form-label">Success</label>
  <div class="col-3">
   <span class="switch switch-outline switch-icon switch-success">
    <label>
     <input type="checkbox" checked="checked" name="select"/>
     <span></span>
    </label>
   </span>
  </div>
  <label class="col-3 col-form-label">Warning</label>
  <div class="col-3">
   <span class="switch switch-outline switch-icon switch-warning">
    <label>
     <input type="checkbox" checked="checked" name="select"/>
     <span></span>
    </label>
   </span>
  </div>
 </div>
 <div class="form-group row">
  <label class="col-3 col-form-label">Info</label>
  <div class="col-3">
   <span class="switch switch-outline switch-icon switch-info">
    <label>
     <input type="checkbox" checked="checked" name="select"/>
     <span></span>
    </label>
   </span>
  </div>
  <label class="col-3 col-form-label">Danger</label>
  <div class="col-3">
   <span class="switch switch-outline switch-icon switch-danger">
    <label>
     <input type="checkbox" checked="checked" name="select"/>
     <span></span>
    </label>
   </span>
  </div>
 </div>
 <div class="form-group row">
  <label class="col-3 col-form-label">Primary</label>
  <div class="col-3">
   <span class="switch switch-outline switch-icon switch-primary">
    <label>
     <input type="checkbox" checked="checked" name="select"/>
     <span></span>
    </label>
   </span>
  </div>
  <label class="col-3 col-form-label">Brand</label>
  <div class="col-3">
   <span class="switch switch-outline switch-icon switch-brand">
    <label>
     <input type="checkbox" checked="checked" name="select"/>
     <span></span>
    </label>
   </span>
  </div>
 </div>
 <div class="form-group row">
  <label class="col-3 col-form-label">Dark</label>
  <div class="col-3">
   <span class="switch switch-outline switch-icon switch-dark">
    <label>
     <input type="checkbox" checked="checked" name="select"/>
     <span></span>
    </label>
   </span>
  </div>
 </div>
</form>