Switches

A switch has the markup of a custom checkbox but uses the .slider class to render a toggle switch. Switches also support the disabled attribute.

Default switch

<ul class="list-unstyled">
<li>
   <label class="switch ">
      <input type="checkbox" class="primary" checked>
      <span class="slider round"></span>
    </label>
  </li>
   <li>
        <label class="switch ">
      <input type="checkbox" class="secondary" checked>
      <span class="slider round"></span>
    </label>
 </li>
  <li>
       <label class="switch ">
      <input type="checkbox" class="success" checked>
      <span class="slider round"></span>
    </label>
     </li>
    <li>
        <label class="switch ">
          <input type="checkbox" class="info">
          <span class="slider round"></span>
        </label>
    </li>
     <li>
      <label class="switch ">
      <input type="checkbox" class="warning" checked>
      <span class="slider round"></span>
    </label>
  </li>
   <li>
      <label class="switch ">
      <input type="checkbox" class="danger" checked>
      <span class="slider round"></span>
    </label>
  </li>
</ul>

Switch icon

<ul class="list-unstyled">
	 <li>
           <label class="switch ">
          <input type="checkbox" class="primary" checked>
          <span class="slider round icon"></span>
        </label>
      </li>
		 <li>
        <label class="switch ">
          <input type="checkbox" class="secondary" checked>
          <span class="slider round icon"></span>
        </label>
        </li>
      <li>
           <label class="switch ">
          <input type="checkbox" class="success">
          <span class="slider round icon"></span>
        </label>
       </li>
       <li>
           <label class="switch ">
          <input type="checkbox" class="info" checked>
          <span class="slider round icon"></span>
        </label>
     </li>
      <li>
         <label class="switch ">
          <input type="checkbox" class="warning" checked>
          <span class="slider round icon"></span>
        </label>
        </li>
      <li>
           <label class="switch ">
          <input type="checkbox" class="danger" checked>
          <span class="slider round icon"></span>
        </label>
    </li>
</ul>

Switch On/Off

<ul class="list-unstyled">
	 <li>
         <label class="switch ">
        <input type="checkbox" class="primary" checked>
        <span class="slider round name"></span>
      </label>
    </li>
	 <li>
      <label class="switch ">
        <input type="checkbox" class="secondary">
        <span class="slider round name"></span>
      </label>
      </li>
    <li>
         <label class="switch ">
        <input type="checkbox" class="success" checked>
        <span class="slider round name"></span>
      </label>
     </li>
     <li>
         <label class="switch ">
        <input type="checkbox" class="info" checked>
        <span class="slider round name"></span>
      </label>
   </li>
    <li>
       <label class="switch ">
        <input type="checkbox" class="warning">
        <span class="slider round name"></span>
      </label>
      </li>
    <li>
         <label class="switch ">
        <input type="checkbox" class="danger" checked>
        <span class="slider round name"></span>
      </label>
  </li>
</ul>