diff --git a/css/bootstrap-toggle.css b/css/bootstrap-toggle.css
index 057d08b..e0ab0c1 100644
--- a/css/bootstrap-toggle.css
+++ b/css/bootstrap-toggle.css
@@ -9,7 +9,7 @@
 
 .checkbox label .toggle,
 .checkbox-inline .toggle {
-	margin-left: -20px;
+	margin-left: 0px;
 	margin-right: 5px;
 }
 
diff --git a/css/bootstrap-toggle.min.css b/css/bootstrap-toggle.min.css
index 0d42ed0..f7c1748 100644
--- a/css/bootstrap-toggle.min.css
+++ b/css/bootstrap-toggle.min.css
@@ -5,7 +5,7 @@
  * Copyright 2014 Min Hur, The New York Times Company
  * Licensed under MIT
  * ======================================================================== */
-.checkbox label .toggle,.checkbox-inline .toggle{margin-left:-20px;margin-right:5px}
+.checkbox label .toggle,.checkbox-inline .toggle{margin-left:0px;margin-right:5px}
 .toggle{position:relative;overflow:hidden}
 .toggle input[type=checkbox]{display:none}
 .toggle-group{position:absolute;width:200%;top:0;bottom:0;left:0;transition:left .35s;-webkit-transition:left .35s;-moz-user-select:none;-webkit-user-select:none}
diff --git a/doc/stylesheet.css b/doc/stylesheet.css
index fe7a444..524a2ac 100644
--- a/doc/stylesheet.css
+++ b/doc/stylesheet.css
@@ -22,12 +22,6 @@ nav.navbar {
 #navbar {
 	margin: 0px;
 }
-#navbar .navbar-nav li iframe {
-	margin-top: 15px;
-}
-#navbar .navbar-nav li:last-child iframe {
-	margin-right: 15px;
-}
 
 @media screen and (max-width: 767px) {
 	#navbar .navbar-nav li iframe {
diff --git a/index.html b/index.html
index c255754..889a063 100644
--- a/index.html
+++ b/index.html
@@ -13,7 +13,7 @@
 	<title>Bootstrap Toggle</title>
 	<link rel="canonical" href="http://www.bootstraptoggle.com">
 	<link href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.3/styles/github.min.css" rel="stylesheet" >
-	<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
+	<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" rel="stylesheet">
 	<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
 	<link href="css/bootstrap-toggle.css" rel="stylesheet">
 	<link href="doc/stylesheet.css" rel="stylesheet">
@@ -21,30 +21,27 @@
 </head>
 <body>
 	<header>
-		<nav class="navbar navbar-default container" role="navigation">
+		<nav class="navbar navbar-light bg-faded container" role="navigation">
 			<div class="container">
-				<div class="navbar-header">
-					<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar">
-						<span class="sr-only">Toggle navigation</span>
-						<span class="icon-bar"></span>
-						<span class="icon-bar"></span>
-						<span class="icon-bar"></span>
-					</button>
+				<button class="navbar-toggler collapsed float-xs-right hidden-md-up" type="button" data-toggle="collapse" data-target="#navbar" aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation"></button>
+				<div id="navbar" class="collapse navbar-toggleable-md">
 					<a class="navbar-brand" href="#">Bootstrap Toggle</a>
-				</div>
-				<div id="navbar" class="collapse navbar-collapse">
-					<ul class="nav navbar-nav navbar-right">
-						<li><a href="#usage">Usage</a></li>
-						<li><a href="#api">API</a></li>
-						<li><a href="#events">Events</a></li>
-						<li><a href="#demos">Demos</a></li>
-						<li><a href="https://github.com/minhur/bootstrap-toggle/issues">Issues</a></li>
-						<li><a href="https://github.com/minhur/bootstrap-toggle/archive/master.zip">Download</a></li>
-						<li>
-							<iframe src="https://mdo.github.io/github-buttons/github-btn.html?user=minhur&repo=bootstrap-toggle&type=watch" allowtransparency="true" frameborder="0" scrolling="0" width="62" height="20"></iframe>
+					<ul class="nav navbar-nav float-lg-right">
+						<li class="nav-item"><a href="#usage" class="nav-link">Usage</a></li>
+						<li class="nav-item"><a href="#api" class="nav-link">API</a></li>
+						<li class="nav-item"><a href="#events" class="nav-link">Events</a></li>
+						<li class="nav-item"><a href="#demos" class="nav-link">Demos</a></li>
+						<li class="nav-item"><a href="https://github.com/minhur/bootstrap-toggle/issues" class="nav-link">Issues</a></li>
+						<li class="nav-item"><a href="https://github.com/minhur/bootstrap-toggle/archive/master.zip" class="nav-link">Download</a></li>
+						<li class="nav-item">
+							<a href="#" class="nav-link">
+								<iframe src="https://mdo.github.io/github-buttons/github-btn.html?user=minhur&repo=bootstrap-toggle&type=watch" allowtransparency="true" frameborder="0" scrolling="0" width="62" height="20"></iframe>
+							</a>
 						</li>
-						<li>
-							<iframe src="https://mdo.github.io/github-buttons/github-btn.html?user=minhur&repo=bootstrap-toggle&type=fork" allowtransparency="true" frameborder="0" scrolling="0" width="53" height="20"></iframe>
+						<li class="nav-item">
+							<a href="#" class="nav-link">
+								<iframe src="https://mdo.github.io/github-buttons/github-btn.html?user=minhur&repo=bootstrap-toggle&type=fork" allowtransparency="true" frameborder="0" scrolling="0" width="53" height="20"></iframe>
+							</a>
 						</li>
 					</ul>
 				</div>
@@ -68,7 +65,7 @@ <h2>Getting Started</h2>
 			<hr>
 			<h3>Installation</h3>
 			<p>You can <a href="https://github.com/minhur/bootstrap-toggle/archive/master.zip">download</a> the latest version of Bootstrap Toggle or use CDN to load the library.</p>
-			<p><span class="label label-warning">Warning</span> If you are using Bootstrap v2.3.2, use <code>bootstrap2-toggle.min.js</code> and <code>bootstrap2-toggle.min.css</code> instead.</p>
+			<p><span class="tag tag-warning">Warning</span> If you are using Bootstrap v2.3.2, use <code>bootstrap2-toggle.min.js</code> and <code>bootstrap2-toggle.min.css</code> instead.</p>
 			<code class="highlight">&lt;link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet"&gt;
 &lt;script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"&gt;&lt;/script&gt;</code>
 
@@ -184,16 +181,16 @@ <h3>Options</h3>
 					<td>string</td>
 					<td><code>"primary"</code></td>
 					<td>
-						Style of the <em>on</em> toggle.<br>Possible values are:<code>default</code>,<code>primary</code>,<code>success</code>,<code>info</code>,<code>warning</code>,<code>danger</code><br>
+						Style of the <em>on</em> toggle.<br>Possible values are:<code>secondary</code>,<code>primary</code>,<code>success</code>,<code>info</code>,<code>warning</code>,<code>danger</code><br>
 						Refer to Bootstrap <a href="http://getbootstrap.com/css/#buttons-options" target="_blank">Button Options</a> documentation for more information.
 					</td>
 				</tr>
 				<tr>
 					<td>offstyle</td>
 					<td>string</td>
-					<td><code>"default"</code></td>
+					<td><code>"secondary"</code></td>
 					<td>
-						Style of the <em>off</em> toggle.<br>Possible values are:<code>default</code>,<code>primary</code>,<code>success</code>,<code>info</code>,<code>warning</code>,<code>danger</code><br>
+						Style of the <em>off</em> toggle.<br>Possible values are:<code>secondary</code>,<code>primary</code>,<code>success</code>,<code>info</code>,<code>warning</code>,<code>danger</code><br>
 						Refer to Bootstrap <a href="http://getbootstrap.com/css/#buttons-options" target="_blank">Button Options</a> documentation for more information.
 					</td>
 				</tr>
@@ -245,43 +242,43 @@ <h3>Methods</h3>
 					<td><em>initialize</em></td>
 					<td><code>$('#toggle-demo').bootstrapToggle()</code></td>
 					<td>Initializes the toggle plugin with options</td>
-					<td><button class="btn btn-default btn-xs" onclick="demo.init('#toggle-demo')">Initialize</button></td>
+					<td><button class="btn btn-secondary btn-xs" onclick="demo.init('#toggle-demo')">Initialize</button></td>
 				</tr>
 				<tr>
 					<td>destroy</td>
 					<td><code>$('#toggle-demo').bootstrapToggle('destroy')</code></td>
 					<td>Destroys the toggle</td>
-					<td><button class="btn btn-default btn-xs" onclick="demo.destroy('#toggle-demo')">Destroy</button></td>
+					<td><button class="btn btn-secondary btn-xs" onclick="demo.destroy('#toggle-demo')">Destroy</button></td>
 				</tr>
 				<tr>
 					<td>on</td>
 					<td><code>$('#toggle-demo').bootstrapToggle('on')</code></td>
 					<td>Sets the toggle to 'On' state</td>
-					<td><button class="btn btn-default btn-xs" onclick="demo.on('#toggle-demo')">On</button></td>
+					<td><button class="btn btn-secondary btn-xs" onclick="demo.on('#toggle-demo')">On</button></td>
 				</tr>
 				<tr>
 					<td>off</td>
 					<td><code>$('#toggle-demo').bootstrapToggle('off')</code></td>
 					<td>Sets the toggle to 'Off' state</td>
-					<td><button class="btn btn-default btn-xs" onclick="demo.off('#toggle-demo')">Off</button></td>
+					<td><button class="btn btn-secondary btn-xs" onclick="demo.off('#toggle-demo')">Off</button></td>
 				</tr>
 				<tr>
 					<td>toggle</td>
 					<td><code>$('#toggle-demo').bootstrapToggle('toggle')</code></td>
 					<td>Toggles the state of the toggle</td>
-					<td><button class="btn btn-default btn-xs" onclick="demo.toggle('#toggle-demo')">Toggle</button></td>
+					<td><button class="btn btn-secondary btn-xs" onclick="demo.toggle('#toggle-demo')">Toggle</button></td>
 				</tr>
 				<tr>
 					<td>enable</td>
 					<td><code>$('#toggle-demo').bootstrapToggle('enable')</code></td>
 					<td>Enables the toggle</td>
-					<td><button class="btn btn-default btn-xs" onclick="demo.enable('#toggle-demo')">Enable</button></td>
+					<td><button class="btn btn-secondary btn-xs" onclick="demo.enable('#toggle-demo')">Enable</button></td>
 				</tr>
 				<tr>
 					<td>disable</td>
 					<td><code>$('#toggle-demo').bootstrapToggle('disable')</code></td>
 					<td>Disables the toggle</td>
-					<td><button class="btn btn-default btn-xs" onclick="demo.disable('#toggle-demo')">Disable</button></td>
+					<td><button class="btn btn-secondary btn-xs" onclick="demo.disable('#toggle-demo')">Disable</button></td>
 				</tr>
 				</tbody>
 				</table>
@@ -321,7 +318,7 @@ <h3>API vs Input</h3>
 						$('#toggle-trigger').bootstrapToggle('on')
 					}
 					function toggleOff() {
-						$('#toggle-trigger').bootstrapToggle('off')	
+						$('#toggle-trigger').bootstrapToggle('off')
 					}
 					function toggleOnByInput() {
 						$('#toggle-trigger').prop('checked', true).change()
@@ -345,7 +342,7 @@ <h3>Sizes</h3>
 				<input type="checkbox" checked data-toggle="toggle" data-size="small">
 				<input type="checkbox" checked data-toggle="toggle" data-size="mini">
 			</div>
-			
+
 			<h3>Custom Sizes</h3>
 			<p>Bootstrap toggle can handle custom sizes by <code>data-width</code> and <code>data-height</code> options.</p>
 			<div class="example">
@@ -362,7 +359,7 @@ <h3>Colors</h3>
 				<input type="checkbox" checked data-toggle="toggle" data-onstyle="info">
 				<input type="checkbox" checked data-toggle="toggle" data-onstyle="warning">
 				<input type="checkbox" checked data-toggle="toggle" data-onstyle="danger">
-				<input type="checkbox" checked data-toggle="toggle" data-onstyle="default">
+				<input type="checkbox" checked data-toggle="toggle" data-onstyle="secondary">
 			</div>
 
 			<h3>Colors Mix</h3>
@@ -435,7 +432,7 @@ <h3>Animation Speed</h3>
 	</footer>
 	<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.3/highlight.min.js"></script>
 	<script src="doc/script.js"></script>
-	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
+	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js"></script>
 	<script src="js/bootstrap-toggle.js"></script>
 	<script>
 		(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
diff --git a/js/bootstrap-toggle.js b/js/bootstrap-toggle.js
index 533914e..7ddb4dc 100644
--- a/js/bootstrap-toggle.js
+++ b/js/bootstrap-toggle.js
@@ -25,7 +25,7 @@
 		on: 'On',
 		off: 'Off',
 		onstyle: 'primary',
-		offstyle: 'default',
+		offstyle: 'secondary',
 		size: 'normal',
 		style: '',
 		width: null,
@@ -56,7 +56,7 @@
 			.addClass(this._onstyle + ' ' + size)
 		var $toggleOff = $('<label class="btn">').html(this.options.off)
 			.addClass(this._offstyle + ' ' + size + ' active')
-		var $toggleHandle = $('<span class="toggle-handle btn btn-default">')
+		var $toggleHandle = $('<span class="toggle-handle btn btn-secondary">')
 			.addClass(size)
 		var $toggleGroup = $('<div class="toggle-group">')
 			.append($toggleOn, $toggleOff, $toggleHandle)
@@ -106,11 +106,13 @@
 	}
 
 	Toggle.prototype.enable = function () {
+		this.$toggle.removeClass('disabled')
 		this.$toggle.removeAttr('disabled')
 		this.$element.prop('disabled', false)
 	}
 
 	Toggle.prototype.disable = function () {
+		this.$toggle.addClass('disabled')
 		this.$toggle.attr('disabled', 'disabled')
 		this.$element.prop('disabled', true)
 	}
diff --git a/js/bootstrap-toggle.min.js b/js/bootstrap-toggle.min.js
index 3711320..09f414e 100644
--- a/js/bootstrap-toggle.min.js
+++ b/js/bootstrap-toggle.min.js
@@ -5,5 +5,5 @@
  * Copyright 2014 Min Hur, The New York Times Company
  * Licensed under MIT
  * ======================================================================== */
-+function(a){"use strict";function b(b){return this.each(function(){var d=a(this),e=d.data("bs.toggle"),f="object"==typeof b&&b;e||d.data("bs.toggle",e=new c(this,f)),"string"==typeof b&&e[b]&&e[b]()})}var c=function(b,c){this.$element=a(b),this.options=a.extend({},this.defaults(),c),this.render()};c.VERSION="2.2.0",c.DEFAULTS={on:"On",off:"Off",onstyle:"primary",offstyle:"default",size:"normal",style:"",width:null,height:null},c.prototype.defaults=function(){return{on:this.$element.attr("data-on")||c.DEFAULTS.on,off:this.$element.attr("data-off")||c.DEFAULTS.off,onstyle:this.$element.attr("data-onstyle")||c.DEFAULTS.onstyle,offstyle:this.$element.attr("data-offstyle")||c.DEFAULTS.offstyle,size:this.$element.attr("data-size")||c.DEFAULTS.size,style:this.$element.attr("data-style")||c.DEFAULTS.style,width:this.$element.attr("data-width")||c.DEFAULTS.width,height:this.$element.attr("data-height")||c.DEFAULTS.height}},c.prototype.render=function(){this._onstyle="btn-"+this.options.onstyle,this._offstyle="btn-"+this.options.offstyle;var b="large"===this.options.size?"btn-lg":"small"===this.options.size?"btn-sm":"mini"===this.options.size?"btn-xs":"",c=a('<label class="btn">').html(this.options.on).addClass(this._onstyle+" "+b),d=a('<label class="btn">').html(this.options.off).addClass(this._offstyle+" "+b+" active"),e=a('<span class="toggle-handle btn btn-default">').addClass(b),f=a('<div class="toggle-group">').append(c,d,e),g=a('<div class="toggle btn" data-toggle="toggle">').addClass(this.$element.prop("checked")?this._onstyle:this._offstyle+" off").addClass(b).addClass(this.options.style);this.$element.wrap(g),a.extend(this,{$toggle:this.$element.parent(),$toggleOn:c,$toggleOff:d,$toggleGroup:f}),this.$toggle.append(f);var h=this.options.width||Math.max(c.outerWidth(),d.outerWidth())+e.outerWidth()/2,i=this.options.height||Math.max(c.outerHeight(),d.outerHeight());c.addClass("toggle-on"),d.addClass("toggle-off"),this.$toggle.css({width:h,height:i}),this.options.height&&(c.css("line-height",c.height()+"px"),d.css("line-height",d.height()+"px")),this.update(!0),this.trigger(!0)},c.prototype.toggle=function(){this.$element.prop("checked")?this.off():this.on()},c.prototype.on=function(a){return this.$element.prop("disabled")?!1:(this.$toggle.removeClass(this._offstyle+" off").addClass(this._onstyle),this.$element.prop("checked",!0),void(a||this.trigger()))},c.prototype.off=function(a){return this.$element.prop("disabled")?!1:(this.$toggle.removeClass(this._onstyle).addClass(this._offstyle+" off"),this.$element.prop("checked",!1),void(a||this.trigger()))},c.prototype.enable=function(){this.$toggle.removeAttr("disabled"),this.$element.prop("disabled",!1)},c.prototype.disable=function(){this.$toggle.attr("disabled","disabled"),this.$element.prop("disabled",!0)},c.prototype.update=function(a){this.$element.prop("disabled")?this.disable():this.enable(),this.$element.prop("checked")?this.on(a):this.off(a)},c.prototype.trigger=function(b){this.$element.off("change.bs.toggle"),b||this.$element.change(),this.$element.on("change.bs.toggle",a.proxy(function(){this.update()},this))},c.prototype.destroy=function(){this.$element.off("change.bs.toggle"),this.$toggleGroup.remove(),this.$element.removeData("bs.toggle"),this.$element.unwrap()};var d=a.fn.bootstrapToggle;a.fn.bootstrapToggle=b,a.fn.bootstrapToggle.Constructor=c,a.fn.toggle.noConflict=function(){return a.fn.bootstrapToggle=d,this},a(function(){a("input[type=checkbox][data-toggle^=toggle]").bootstrapToggle()}),a(document).on("click.bs.toggle","div[data-toggle^=toggle]",function(b){var c=a(this).find("input[type=checkbox]");c.bootstrapToggle("toggle"),b.preventDefault()})}(jQuery);
++function(a){"use strict";function b(b){return this.each(function(){var d=a(this),e=d.data("bs.toggle"),f="object"==typeof b&&b;e||d.data("bs.toggle",e=new c(this,f)),"string"==typeof b&&e[b]&&e[b]()})}var c=function(b,c){this.$element=a(b),this.options=a.extend({},this.defaults(),c),this.render()};c.VERSION="2.2.0",c.DEFAULTS={on:"On",off:"Off",onstyle:"primary",offstyle:"secondary",size:"normal",style:"",width:null,height:null},c.prototype.defaults=function(){return{on:this.$element.attr("data-on")||c.DEFAULTS.on,off:this.$element.attr("data-off")||c.DEFAULTS.off,onstyle:this.$element.attr("data-onstyle")||c.DEFAULTS.onstyle,offstyle:this.$element.attr("data-offstyle")||c.DEFAULTS.offstyle,size:this.$element.attr("data-size")||c.DEFAULTS.size,style:this.$element.attr("data-style")||c.DEFAULTS.style,width:this.$element.attr("data-width")||c.DEFAULTS.width,height:this.$element.attr("data-height")||c.DEFAULTS.height}},c.prototype.render=function(){this._onstyle="btn-"+this.options.onstyle,this._offstyle="btn-"+this.options.offstyle;var b="large"===this.options.size?"btn-lg":"small"===this.options.size?"btn-sm":"mini"===this.options.size?"btn-xs":"",c=a('<label class="btn">').html(this.options.on).addClass(this._onstyle+" "+b),d=a('<label class="btn">').html(this.options.off).addClass(this._offstyle+" "+b+" active"),e=a('<span class="toggle-handle btn btn-secondary">').addClass(b),f=a('<div class="toggle-group">').append(c,d,e),g=a('<div class="toggle btn" data-toggle="toggle">').addClass(this.$element.prop("checked")?this._onstyle:this._offstyle+" off").addClass(b).addClass(this.options.style);this.$element.wrap(g),a.extend(this,{$toggle:this.$element.parent(),$toggleOn:c,$toggleOff:d,$toggleGroup:f}),this.$toggle.append(f);var h=this.options.width||Math.max(c.outerWidth(),d.outerWidth())+e.outerWidth()/2,i=this.options.height||Math.max(c.outerHeight(),d.outerHeight());c.addClass("toggle-on"),d.addClass("toggle-off"),this.$toggle.css({width:h,height:i}),this.options.height&&(c.css("line-height",c.height()+"px"),d.css("line-height",d.height()+"px")),this.update(!0),this.trigger(!0)},c.prototype.toggle=function(){this.$element.prop("checked")?this.off():this.on()},c.prototype.on=function(a){return this.$element.prop("disabled")?!1:(this.$toggle.removeClass(this._offstyle+" off").addClass(this._onstyle),this.$element.prop("checked",!0),void(a||this.trigger()))},c.prototype.off=function(a){return this.$element.prop("disabled")?!1:(this.$toggle.removeClass(this._onstyle).addClass(this._offstyle+" off"),this.$element.prop("checked",!1),void(a||this.trigger()))},c.prototype.enable=function(){this.$toggle.removeClass("disabled"),this.$toggle.removeAttr("disabled"),this.$element.prop("disabled",!1)},c.prototype.disable=function(){this.$toggle.addClass("disabled"),this.$toggle.attr("disabled","disabled"),this.$element.prop("disabled",!0)},c.prototype.update=function(a){this.$element.prop("disabled")?this.disable():this.enable(),this.$element.prop("checked")?this.on(a):this.off(a)},c.prototype.trigger=function(b){this.$element.off("change.bs.toggle"),b||this.$element.change(),this.$element.on("change.bs.toggle",a.proxy(function(){this.update()},this))},c.prototype.destroy=function(){this.$element.off("change.bs.toggle"),this.$toggleGroup.remove(),this.$element.removeData("bs.toggle"),this.$element.unwrap()};var d=a.fn.bootstrapToggle;a.fn.bootstrapToggle=b,a.fn.bootstrapToggle.Constructor=c,a.fn.toggle.noConflict=function(){return a.fn.bootstrapToggle=d,this},a(function(){a("input[type=checkbox][data-toggle^=toggle]").bootstrapToggle()}),a(document).on("click.bs.toggle","div[data-toggle^=toggle]",function(b){var c=a(this).find("input[type=checkbox]");c.bootstrapToggle("toggle"),b.preventDefault()})}(jQuery);
 //# sourceMappingURL=bootstrap-toggle.min.js.map
\ No newline at end of file
