AdminUIUX

Fitness

Please wait we are preparing awesome things...

Switches

Standard Switch


            <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>
            <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">
              <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="small">
                <label class="form-check-label" for="small">Default</label>
            </div>
            <div class="form-check form-switch form-check-md">
                <input class="form-check-input" type="checkbox" role="switch" id="md">
                <label class="form-check-label" for="md">form-check-md</label>
            </div>
            <div class="form-check form-switch form-check-lg">
                <input class="form-check-input" type="checkbox" role="switch" id="lg">
                <label class="form-check-label" for="lg">form-check-lg</label>
            </div>

Colored Switches


            <div class="form-check form-switch">
                <input class="form-check-input" type="checkbox" role="switch" id="color1" checked>
                <label class="form-check-label" for="color1">Theme</label>
            </div>
            <div class="form-check form-switch theme-pink">
                <input class="form-check-input" type="checkbox" role="switch" id="color2" checked>
                <label class="form-check-label" for="color2">theme-pink</label>
            </div>
            <div class="form-check form-switch theme-red">
                <input class="form-check-input" type="checkbox" role="switch" id="color3" checked>
                <label class="form-check-label" for="color3">theme-red</label>
            </div>
            <div class="form-check form-switch theme-orange">
                <input class="form-check-input" type="checkbox" role="switch" id="color4" checked>
                <label class="form-check-label" for="color4">theme-orange</label>
            </div>
            <div class="form-check form-switch theme-yellow">
                <input class="form-check-input" type="checkbox" role="switch" id="color5" checked>
                <label class="form-check-label" for="color6">theme-yellow</label>
            </div>
            <div class="form-check form-switch theme-green">
                <input class="form-check-input" type="checkbox" role="switch" id="color6" checked>
                <label class="form-check-label" for="color6">theme-green</label>
            </div>
            <div class="form-check form-switch theme-teal">
                <input class="form-check-input" type="checkbox" role="switch" id="color7" checked>
                <label class="form-check-label" for="color7">theme-teal</label>
            </div>
            <div class="form-check form-switch theme-indigo">
                <input class="form-check-input" type="checkbox" role="switch" id="color8" checked>
                <label class="form-check-label" for="color8">theme-indigo</label>
            </div>

Customized Switch

Light
Dark

            <!-- light-dark layout -->
            <div class="row align-items-center no-rtl">
                <div class="col-auto ">Light</div>
                <div class="col-auto px-0">
                    <div class="form-check form-switch sunmoon">
                        <input class="form-check-input" type="checkbox" role="switch" id="btn-layout-modes-dark">
                        <label class="form-check-label" for="btn-layout-modes-dark">
                            <i class="bi bi-brightness-low sun"></i>
                            <i class="bi bi-moon-stars moon"></i>
                        </label>
                    </div>
                </div>
                <div class="col-auto">Dark</div>
            </div>
Checkboxes
Sliders