How to use Bootstrap Toggle in ASP.Net

Last Reply on Mar 27, 2017 02:51 AM By dharmendr

Posted on Mar 27, 2017 01:56 AM

Hi,

please help me  with issue.. I've added bootstrap toggle in two of my asp.net forms. It is working in one but not in other despite all links and references & all definitions being correct.. below is what I've written:

<%-- Bootstrap Toggles --%>
 <link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet"/>
 <script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>
 <style>
 .toggle.ios, .toggle-on.ios, .toggle-off.ios { 
 border-radius: 20px;
 width:110px;
 }
 .toggle.ios .toggle-handle { 
 border-radius: 20px;
 width:40px;
 }
 </style>

<%-- aspx markup below --%>

<div class="box-footer">
  <div style="float: right">
    <input type="checkbox" id="msgtoggle" runat="server" checked data-toggle="toggle" data-style="ios" data-on="<i class='fa fa-paper-plane-o'/> Send" data-onstyle="success" data-off="<i class='fa fa-ban'/> Don't send" data-offstyle="danger" />
  </div>
</div>

Please help..!!

You are viewing reply posted by: dharmendr on Mar 27, 2017 02:51 AM.
Posted on Mar 27, 2017 02:51 AM Modified on on Mar 27, 2017 02:51 AM

Hi jmprateek,

Refer the below sample code.

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript" src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>
    <link type="text/css" rel="stylesheet" href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" />
    <style type="text/css">
        .toggle.ios, .toggle-on.ios, .toggle-off.ios
        {
            border-radius: 20px;
            width: 110px;
        }
        .toggle.ios .toggle-handle
        {
            border-radius: 20px;
            width: 40px;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div class="box-footer">
        <div style="float: right">
            <input type="checkbox" id="msgtoggle" runat="server" checked data-toggle="toggle"
                data-style="ios" data-on="<i class='fa fa-paper-plane-o'/>Send" data-onstyle="success"
                data-off="<i class='fa fa-ban'/>Don't send" data-offstyle="danger" />
        </div>
    </div>
    </form>
</body>
</html>

Demo