Show Switch label messages with Bootstrap 4 theme

Environment

Product	Progress® Kendo UI® Switch for jQuery
Product Version	Tested up to version 2024.1.319

Description

I have defined the label messages in the Switch but they are not visible with Bootstrap 4 theme. Why and how can I display them?

• R1 2023 is the last official release of Kendo jQuery, which supports and ships Less themes with the product.

Solution

The Kendo UI Bootstrap theme follows the designs as laid out in Bootstrap v4. If you prefer to show the labels and deviate from the design, you may override the display:none style that they get for this theme like this:

    <style>
        .k-switch-label-on,.k-switch-label-off {
          display:block;
        }
    </style>

    <style>
        .k-switch-label-on,.k-switch-label-off {
          display:block;
        }
    </style>

        <div id="example">
      Notifications <input type="checkbox" id="notifications-switch" aria-label="Notifications Switch" checked="checked" /></li>
    </div>

    <script>
      $(function () {
        $("#notifications-switch").kendoSwitch({
          messages: {
            checked: "YES",
            unchecked: "NO"
          }
        });
      });
    </script>