@@include('header.htm', { "title": "Switcher - Sleek Admin Dashboard Template", "vector_map": "", "date_range_picker": "", "select2": "", "ladda": "", "toastr": "", "flag_icon": "", "full_calendar_core": "", "full_calendar_daygrid": "", "data_table": "", "responsive_data_table": "", "expendable_data_table": "" }) @@include('sidebar.htm', { "parent": "components", "sub_parent": "components", "active": "switcher" }) @@include('top-bar.htm')

To use switcher copy the following code snippet.

 
  <label class="switch switch-primary form-control-label">
   <input type="checkbox" class="switch-input form-check-input" value="on" checked>
    <span class="switch-label"></span>
   <span class="switch-handle"></span>
  </label>
 

Switch Default

For switch Add class .switch-* to <label class="switch">

Switch Default Pills

For switch pills Add class .switch-pill switch-* to <label class="switch">

Switch Outline

For switch outline Add class .switch-outline-* to <label class="switch">

Switch Outline Pills

For switch outline pill Add class .switch-pill .switch-outline-* to <label class="switch">

Switch Outline Alternative

For switch outline Alternative Add class .switch-outline-alt-* to <label class="switch">

Switch Outline Alternative Pills

For switch outline Alternative pill Add class .switch-pill .switch-outline-alt-* to <label class="switch">

Switch with Text

For switch with text Add class .switch-text to <label class="switch">

Switch with Text Pills

For switch with text pill Add class .switch-pill .switch-text .switch-* to <label class="switch">

Switch with Text Outline

For switch with text outline Add class .switch-text .switch-outline-* to <label class="switch">

Switch with Text Outline Pills

For switch with text outline pill Add class .switch-pill .switch-text .switch-outline-* to <label class="switch">

Switch with Text Alternative Outline

For switch with text alternative outline Add class .switch-text .switch-outline-alt-* to <label class="switch">

Switch with Text Outline Alternative Pills

For switch with text outline alternative pill Add class .switch-pill .switch-text .switch-outline-alt-* to <label class="switch">

Switch with Icon

For switch with icon Add class .switch-icon .switch-* to <label class="switch">

Switch with Icon Pills

For switch with icon pill Add class .switch-pill .switch-icon .switch-* to <label class="switch">

Switch with Icon Outline

For switch with icon outline Add class .switch-icon .switch-outline-* to <label class="switch">

Switch with Icon Outline Pills

For switch with icon outline pill Add class .switch-pill .switch-icon .switch-outline-* to <label class="switch">

Switch with Icon Outline Alternative

For switch with icon outline alternative Add class .switch-icon .switch-outline-alt-* to <label class="switch">

Switch with Icon Outline Alternative Pills

For switch with icon outline alternative pill Add class .switch-icon .switch-pill .switch-outline-alt-* to <label class="switch">

@@include('footer.htm', { "chart_js": "", "chartjs": "", "google_map": "", "mapjs": "", "vector_map": "", "vector_map_world_mill": "", "vector_map_js": "", "date_range_picker_moment": "", "date_range_picker": "", "date_range_js": "", "select2": "", "ladda_spin": "", "ladda": "", "jquery_mask": "", "toastr": "", "circle_progress": "", "full_calendar_core": "", "full_calendar_daygrid": "", "full_calendar_js": "", "data_table": "", "data_table_bootstrap4": "", "responsive_data_table": "" })