How to use Bootstrap Toggle in ASP.Net

jmpratee...

SOLVED CLOSED ACTIVE ANSWERED
User: jmprateek
Posted: on Mar 27, 2017 01:56 AM
Forum: Bootstrap
Answer: 1
Views: 20289
Sample Code: Download

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

Download FREE API for Word, Excel and PDF in ASP.Net

dharmend...

1 1

Reply
ANSWER
User: dharmendr
Replied: on Mar 27, 2017 02:51 AM
Modified: on Mar 17, 2020 06:36 AM
Report

Hi jmprateek,

Refer the below sample code.

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
    <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>
    <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>
</body>
</html>

Demo

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

How to use Bootstrap Toggle in ASP.Net

Company

Explore

Follow us

Contact Us