<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>