Turn checkboxes and radio buttons in toggle switches.
Include the dependencies: jQuery, Bootstrap and Bootstrap Switch CSS + Javascript:
[...]
<link href="bootstrap.css" rel="stylesheet">
<link href="bootstrap-switch.css" rel="stylesheet">
<script src="jquery.js"></script>
<script src="bootstrap-switch.js"></script>
[...]
Add your checkbox:
<input type="checkbox" name="my-checkbox" checked>
Initialize Bootstrap Switch on it:
$("[name='my-checkbox']").bootstrapSwitch();
Enjoy.
Import src/less/bootstrap2/bootstrap-switch.less
for version <= 2.3.2 or src/less/bootstrap3/bootstrap-switch.less
for version <= 3.3.4 in your compilation stack.
Two custom directives are available:
A Knockout binding handler is available here
A NuGet package is available here
IE9+ and all the other modern browsers.
.form-control
is not applied to the input. Bootstrap does not support that, refer to Checkboxes and radiosLicensed under the Apache License, Version 2.0 http://www.apache.org/licenses/LICENSE-2.0