Form Switch

Switches 
<div class="form-check form-switch">
        <input class="form-check-input" type="checkbox" role="switch"
            id="flexSwitchCheckDefault">
        <label class="form-check-label" for="flexSwitchCheckDefault">Default switch
            checkbox input</label>
    </div>
    <div class="form-check form-switch">
        <input class="form-check-input" type="checkbox" role="switch"
            id="flexSwitchCheckChecked" checked="">
        <label class="form-check-label" for="flexSwitchCheckChecked">Checked switch
            checkbox input</label>
    </div>
Disabled Switches 

    <div class="form-check form-switch">
        <input class="form-check-input" type="checkbox" role="switch"
            id="flexSwitchCheckDisabled" disabled="">
        <label class="form-check-label" for="flexSwitchCheckDisabled">Disabled
            switch
            checkbox input</label>
    </div>
    <div class="form-check form-switch mb-0">
        <input class="form-check-input" type="checkbox" role="switch"
            id="flexSwitchCheckCheckedDisabled" checked="" disabled="">
        <label class="form-check-label" for="flexSwitchCheckCheckedDisabled">Disabled
            checked switch checkbox input</label>
    </div>
Switch Sizes 
<div class="form-check form-switch">
        <input class="form-check-input" type="checkbox" role="switch"
            id="switch-sm">
        <label class="form-check-label" for="switch-sm">Default</label>
    </div>
    <div class="form-check form-check-md form-switch">
        <input class="form-check-input" type="checkbox" role="switch"
            id="switch-md">
        <label class="form-check-label" for="switch-md">Medium</label>
    </div>
    <div class="form-check form-check-lg form-switch">
        <input class="form-check-input" type="checkbox" role="switch"
            id="switch-lg">
        <label class="form-check-label" for="switch-lg">Large</label>
    </div>
Reverse 
<div class="form-check form-switch form-check-reverse">
        <input class="form-check-input" type="checkbox"
            id="flexSwitchCheckReverse">
        <label class="form-check-label" for="flexSwitchCheckReverse">Reverse
            switch
            checkbox input</label>
    </div>
Toggle Switches Style-1 
<div class="row gy-1">
            <div class="col-xl-4">
                <div class="toggle on mb-3">
                    <span></span>
                </div>
            </div>
            <div class="col-xl-4">
                <div class="toggle toggle-secondary on mb-3">
                    <span></span>
                </div>
            </div>
            <div class="col-xl-4">
                <div class="toggle toggle-warning on mb-3">
                    <span></span>
                </div>
            </div>
            <div class="col-xl-4">
                <div class="toggle toggle-info on mb-3">
                    <span></span>
                </div>
            </div>
            <div class="col-xl-4">
                <div class="toggle toggle-success on mb-3">
                    <span></span>
                </div>
            </div>
            <div class="col-xl-4">
                <div class="toggle toggle-danger on mb-3">
                    <span></span>
                </div>
            </div>
            <div class="col-xl-4">
                <div class="toggle toggle-light on mb-3">
                    <span></span>
                </div>
            </div>
            <div class="col-xl-4">
                <div class="toggle toggle-dark on mb-3">
                    <span></span>
                </div>
            </div>
        </div>
Toggle Switches Style-2
Primary
Secondary
Warning
Info
Success
Danger
Light
Dark 
<div class="row gy-1">
            <div class="col-xl-4 px-0">
                <div class="custom-toggle-switch d-flex align-items-center mb-4">
                    <input id="toggleswitchPrimary" name="toggleswitch001" type="checkbox" checked="">
                    <label for="toggleswitchPrimary" class="label-primary"></label><span class="ms-3">Primary</span>
                </div>
            </div>
            <div class="col-xl-4 px-0">
                <div class="custom-toggle-switch d-flex align-items-center mb-4">
                    <input id="toggleswitchSecondary" name="toggleswitch001" type="checkbox" checked="">
                    <label for="toggleswitchSecondary" class="label-secondary"></label><span class="ms-3">Secondary</span>
                </div>
            </div>
            <div class="col-xl-4 px-0">
                <div class="custom-toggle-switch d-flex align-items-center mb-4">
                    <input id="toggleswitchWarning" name="toggleswitch001" type="checkbox" checked="">
                    <label for="toggleswitchWarning" class="label-warning"></label><span class="ms-3">Warning</span>
                </div>
            </div>
            <div class="col-xl-4 px-0">
                <div class="custom-toggle-switch d-flex align-items-center mb-4">
                    <input id="toggleswitchInfo" name="toggleswitch001" type="checkbox" checked="">
                    <label for="toggleswitchInfo" class="label-info"></label><span class="ms-3">Info</span>
                </div>
            </div>
            <div class="col-xl-4 px-0">
                <div class="custom-toggle-switch d-flex align-items-center mb-4">
                    <input id="toggleswitchSuccess" name="toggleswitch001" type="checkbox" checked="">
                    <label for="toggleswitchSuccess" class="label-success"></label><span class="ms-3">Success</span>
                </div>
            </div>
            <div class="col-xl-4 px-0">
                <div class="custom-toggle-switch d-flex align-items-center mb-4">
                    <input id="toggleswitchDanger" name="toggleswitch001" type="checkbox" checked="">
                    <label for="toggleswitchDanger" class="label-danger"></label><span class="ms-3">Danger</span>
                </div>
            </div>
            <div class="col-xl-4 px-0">
                <div class="custom-toggle-switch d-flex align-items-center mb-4">
                    <input id="toggleswitchLight" name="toggleswitch001" type="checkbox" checked="">
                    <label for="toggleswitchLight" class="label-light"></label><span class="ms-3">Light</span>
                </div>
            </div>
            <div class="col-xl-4 px-0">
                <div class="custom-toggle-switch d-flex align-items-center mb-4">
                    <input id="toggleswitchDark" name="toggleswitch001" type="checkbox" checked="">
                    <label for="toggleswitchDark" class="label-dark"></label><span class="ms-3">Dark</span>
                </div>
            </div>
        </div>
Toggle Switch-1 Sizes

Small size toggle switch toggle-sm

Default toggle switch

Large size toggle switch toggle-lg

<div class="d-flex align-items-center flex-wrap mb-3">
        <div class=""> <p class="text-muted m-0">Small size toggle switch <code>toggle-sm</code></p></div>
        <div class="toggle toggle-sm on mb-0">
            <span></span>
        </div>
    </div>
    <div class="d-flex align-items-center flex-wrap mb-3">
        <div class=""> <p class="text-muted m-0">Default toggle switch <code></code></p></div>
        <div class="toggle toggle-secondary on mb-0">
            <span></span>
        </div>
    </div>
    <div class="d-flex align-items-center flex-wrap">
        <div class=""> <p class="text-muted m-0">Large size toggle switch <code>toggle-lg</code></p></div>
        <div class="toggle toggle-lg toggle-success on mb-0">
            <span></span>
        </div>
    </div>
Toggle Switch-2 Sizes

Small size toggle switch toggle-sm

Default toggle switch

Large size toggle switch toggle-lg

<div class="d-flex align-items-center flex-wrap mb-4">
        <div class=""><p class="text-muted m-0">Small size toggle switch <code>toggle-sm</code></p></div>
        <div class="custom-toggle-switch toggle-sm ms-2">
            <input id="size-sm" name="toggleswitchsize" type="checkbox" checked="">
            <label for="size-sm" class="label-primary"></label>
        </div>
    </div>
    <div class="d-flex align-items-center flex-wrap mb-4">
        <div class=""><p class="text-muted m-0">Default toggle switch</p></div>
        <div class="custom-toggle-switch ms-2">
            <input id="size-default" name="toggleswitchsize" type="checkbox" checked="">
            <label for="size-default" class="label-secondary mb-1"></label>
        </div>
    </div>
    <div class="d-flex align-items-center flex-wrap">
        <div class=""><p class="text-muted m-0">Large size toggle switch <code>toggle-lg</code></p></div>
        <div class="custom-toggle-switch toggle-lg ms-2">
            <input id="size-lg" name="toggleswitchsize" type="checkbox" checked="">
            <label for="size-lg" class="label-success mb-2"></label>
        </div>
    </div>
Switches Colors 
<div class="form-check form-switch mb-2">
        <input class="form-check-input" type="checkbox" role="switch"
            id="switch-primary" checked="">
        <label class="form-check-label" for="switch-primary">Primary</label>
    </div>
    <div class="form-check form-switch mb-2">
        <input class="form-check-input form-checked-secondary" type="checkbox" role="switch"
            id="switch-secondary" checked="">
        <label class="form-check-label" for="switch-secondary">Secondary</label>
    </div>
    <div class="form-check form-switch mb-2">
        <input class="form-check-input form-checked-warning" type="checkbox" role="switch"
            id="switch-warning" checked="">
        <label class="form-check-label" for="switch-warning">Warning</label>
    </div>
    <div class="form-check form-switch mb-2">
        <input class="form-check-input form-checked-info" type="checkbox" role="switch"
            id="switch-info" checked="">
        <label class="form-check-label" for="switch-info">Info</label>
    </div>
    <div class="form-check form-switch mb-2">
        <input class="form-check-input form-checked-success" type="checkbox" role="switch"
            id="switch-success" checked="">
        <label class="form-check-label" for="switch-success">Success</label>
    </div>
    <div class="form-check form-switch mb-2">
        <input class="form-check-input form-checked-danger" type="checkbox" role="switch"
            id="switch-danger" checked="">
        <label class="form-check-label" for="switch-danger">Danger</label>
    </div>
    <div class="form-check form-switch mb-0">
        <input class="form-check-input form-checked-dark" type="checkbox" role="switch"
            id="switch-dark" checked="">
        <label class="form-check-label" for="switch-dark">Dark</label>
    </div>