New to Kendo UI for jQuery? Download free 30-day trial

Show Switch label messages with Bootstrap 4 theme

Environment

Product Progress Kendo UI Switch
Created with Kendo UI version Tested up to version 2020.1.219

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?

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>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.1.219/styles/kendo.bootstrap-v4.min.css" />
    <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>
In this article
Not finding the help you need? Improve this article