Layout Settings

User Interface Settings

Header Background
LightDark
Sidebar Layout
Navigation Background
DarkLight
Reset Settings
logo-icon logo2
  • Dashboard
    • Ecommerce
    • Analytics new
  • App
    • Chat
    • Contacts
    • Team
    • Calendar
  • UI Components
    • Alert
    • Badge
    • Breadcrumb
    • Button Default
    • Button Dropdown
    • Button Group
    • Button Social
    • Button Loading
    • Card
    • Carousel
    • Collapse
    • List Group
    • Modal
    • Pagination
    • Popover & Tooltip
    • Progress Bar
    • Spinner
    • Switcher
    • Tab
  • Icons
    • Material Icon
    • Flag Icon
  • Forms
    • Basic Input
    • Input Group
    • Checkbox & Radio
    • Form Validation
    • Form Advance
  • Tables
    • Basic Tables
  • Plugins
  • Maps
    • Google Map
  • Widgets
    • General Widget
    • Chart Widget
  • Charts
    • Chart JS
  • Pages
    • User Profile
    • Authentication
      • Sign In
      • Sign Up
    • Others
      • Invoice
      • 404 Page
  • Documentation
    • Getting Started
    • Introduction
    • Quick Start
    • Customization
    • Header Variations
      • Header Light
      • Header Dark
    • Sidebar Variations
      • Sidebar Expend
      • Sidebar Minified
      • Sidebar Offcanvas
  • User Image
    Jhon Smith jhonSmith@gmail.com
  • My Profile
  • Message
  • Projects
  • Setting
  • Log Out
  • 17
logo
  • Forms
    • Basic Input
    • Input Groupl
    • Checkbox & Radio
    • Form Validation
    • Form Advance
  • Calender
  • Chat
  • Contacts
    • User Image
      Jhon Smith jhonSmith@gmail.com
    • My Profile
    • Message
    • Projects
    • Setting
    • Log Out
  • Morbi leo risus
  • Dapibus ac facilisis in
  • Porta ac consectetur ac
  • Vestibulum at eros
    • You have 5 notifications
    • New user registered 10 AM
    • User deleted 07 AM
    • Sales report is ready 12 PM
    • New client 10 AM
    • Server overloaded 05 AM
    • View All
    • User Image
      Jhon Smith jhonSmith@gmail.com
    • My Profile
    • Message
    • Projects
    • Setting
    • Log Out

Switcher

  1. components
  2. switcher

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

  • Action
  • Another action
  • Something else here

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

Switch Default Pills

  • Action
  • Another action
  • Something else here

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

Switch Outline

  • Action
  • Another action
  • Something else here

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

Switch Outline Pills

  • Action
  • Another action
  • Something else here

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

Switch Outline Alternative

  • Action
  • Another action
  • Something else here

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

Switch Outline Alternative Pills

  • Action
  • Another action
  • Something else here

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

Switch with Text

  • Action
  • Another action
  • Something else here

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

Switch with Text Pills

  • Action
  • Another action
  • Something else here

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

Switch with Text Outline

  • Action
  • Another action
  • Something else here

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

Switch with Text Outline Pills

  • Action
  • Another action
  • Something else here

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

Switch with Text Alternative Outline

  • Action
  • Another action
  • Something else here

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

Switch with Text Outline Alternative Pills

  • Action
  • Another action
  • Something else here

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

Switch with Icon

  • Action
  • Another action
  • Something else here

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

Switch with Icon Pills

  • Action
  • Another action
  • Something else here

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

Switch with Icon Outline

  • Action
  • Another action
  • Something else here

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

Switch with Icon Outline Pills

  • Action
  • Another action
  • Something else here

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

Switch with Icon Outline Alternative

  • Action
  • Another action
  • Something else here

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

Switch with Icon Outline Alternative Pills

  • Action
  • Another action
  • Something else here

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

© 2026 Copyright Lukee Dashboard Bootstrap Template by Abdus

Modal Title
We'll never share your email with anyone else.