How to use Bootstrap Toggle in ASP.Net

Last Reply one year ago By dharmendr

Posted one year ago

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..!!

Posted one year ago Modified on one year ago

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

I agree, here is the link: https://www.e-iceblue.com/Introduce/spire-office-for-net-free.html