Warning: Use of undefined constant MDB_STRIPE_SUB_WEBHOOK_SECRET - assumed 'MDB_STRIPE_SUB_WEBHOOK_SECRET' (this will throw an Error in a future version of PHP) in /var/www/acc01/wp-content/themes/mdbootstrap4/inc/mdb-subscriptions/mdb-payments/stripe/class-mdb-stripe-webhook.php on line 26

Warning: Use of undefined constant MDB_PAYPAL_WEBHOOK_ID - assumed 'MDB_PAYPAL_WEBHOOK_ID' (this will throw an Error in a future version of PHP) in /var/www/acc01/wp-content/themes/mdbootstrap4/inc/mdb-subscriptions/mdb-payments/paypal/class-mdb-paypal-webhook.php on line 23

Notice: Undefined index: HTTP_REFERER in /var/www/acc01/wp-content/themes/mdbootstrap4/inc/cookie-setter.php on line 8
Bootstrap Toggle Switch - examples & tutorial

Toggle Switch

Bootstrap 5 Toggle Switch component

A switch is a simple component used for activating one of two predefined options. Commonly used as an on/off button.


Basic example

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





          <!-- Default switch -->
          <div class="form-check form-switch">
            <input class="form-check-input" type="checkbox" id="flexSwitchCheckDefault" />
            <label class="form-check-label" for="flexSwitchCheckDefault"
              >Default switch checkbox input</label
            >
          </div>

          <!-- Checked switch -->
          <div class="form-check form-switch">
            <input class="form-check-input" type="checkbox" id="flexSwitchCheckChecked" checked />
            <label class="form-check-label" for="flexSwitchCheckChecked"
              >Checked switch checkbox input</label
            >
          </div>

          <!-- Default disabled switch -->
          <div class="form-check form-switch">
            <input class="form-check-input" type="checkbox" id="flexSwitchCheckDisabled" disabled />
            <label class="form-check-label" for="flexSwitchCheckDisabled"
              >Disabled switch checkbox input</label
            >
          </div>

          <!-- Checked disabled switch -->
          <div class="form-check form-switch">
            <input
              class="form-check-input"
              type="checkbox"
              id="flexSwitchCheckCheckedDisabled"
              checked
              disabled
            />
            <label class="form-check-label" for="flexSwitchCheckCheckedDisabled"
              >Disabled checked switch checkbox input</label
            >
          </div>