How to create a toggle button in Bootstrap
JavascriptJqueryCssTwitter BootstrapJqtouchJavascript Problem Overview
I originally created a web app in HTML, CSS and JavaScript, then was asked to create it again in Bootstrap too. I've done it all fine, but I had toggle buttons in the web app that have changed back to radio (originally checkbox) buttons instead of the toggle buttons I had originally.
The code for the buttons is:
<label>
Notifications
<span class='toggle'>
<input type='radio'
class='notifications'
name='notifications'
id='notifications' />
</span>
</li>
<label>
Preview
<span class='toggle'>
<input type='radio'
class='preview'
name='preview'
id='preview' />
</span>
</li>
and the JavaScript and CSS files that the HTML page is linked to are:
<script src = 'jqtouch.js'></script>
<script src="jquery.js"></script>
<script src="js/bootstrap.js"></script>
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/bootstrap-responsive.css" rel="stylesheet">
Is there a way to change the code so I can get the toggle button back?
Javascript Solutions
Solution 1 - Javascript
Initial answer from 2013
An excellent (unofficial) Bootstrap Switch is available.
<input type="checkbox" name="my-checkbox" checked>
$("[name='my-checkbox']").bootstrapSwitch();
It uses radio types or checkboxes as switches. A type
attribute has been added since V.1.8.
Source code is available on Github.
Note from 2018
I would not recommend to use those kind of old Switch buttons now, as they always seemed to suffer of usability issues as pointed by many people.
Please consider having a look at modern Switches like this one from the React Component framework (not Bootstrap related, but can be integrated in Bootstrap grid and UI though).
Other implementations exist for Angular, View or jQuery.
import '../assets/index.less'
import React from 'react'
import ReactDOM from 'react-dom'
import Switch from 'rc-switch'
class Switcher extends React.Component {
state = {
disabled: false,
}
toggle = () => {
this.setState({
disabled: !this.state.disabled,
})
}
render() {
return (
<div style={{ margin: 20 }}>
<Switch
disabled={this.state.disabled}
checkedChildren={'开'}
unCheckedChildren={'关'}
/>
</div>
</div>
)
}
}
ReactDOM.render(<Switcher />, document.getElementById('__react-content'))
Native Bootstrap Switches
See ohkts11's answer below about the native Bootstrap switches.
Solution 2 - Javascript
If you don't mind changing your HTML, you can use the data-toggle
attribute on <button>
s. See the Single toggle section of the button examples:
<button type="button" class="btn btn-primary" data-toggle="button">
Single toggle
</button>
Solution 3 - Javascript
Bootstrap 3 has options to create toggle buttons based on checkboxes or radio buttons: http://getbootstrap.com/javascript/#buttons
Checkboxes
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary active">
<input type="checkbox" checked> Option 1 (pre-checked)
</label>
<label class="btn btn-primary">
<input type="checkbox"> Option 2
</label>
<label class="btn btn-primary">
<input type="checkbox"> Option 3
</label>
</div>
Radio buttons
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary active">
<input type="radio" name="options" id="option1" checked> Option 1 (preselected)
</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="option2"> Option 2
</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="option3"> Option 3
</label>
</div>
For these to work you must initialize .btn
s with Bootstrap's Javascript:
$('.btn').button();
Solution 4 - Javascript
I've been trying to activate 'active' class manually with javascript. It's not as usable as a complete library, but for easy cases seems to be enough:
var button = $('#myToggleButton');
button.on('click', function () {
$(this).toggleClass('active');
});
If you think carefully, 'active' class is used by bootstrap when the button is being pressed, not before or after that (our case), so there's no conflict in reuse the same class.
Try this example and tell me if it fails: http://jsbin.com/oYoSALI/1/edit?html,js,output
Solution 5 - Javascript
If you want to keep a small code base, and you are only going to be needing the toggle button for a small part of the application. I would suggest instead maintain you're javascript code your self (angularjs, javascript, jquery) and just use plain CSS.
Good toggle button generator: https://proto.io/freebies/onoff/
Solution 6 - Javascript
Here this very usefull For Bootstrap Toggle Button . Example in code snippet!! and jsfiddle below.
I showed you a few examples above. I hope it helps.
Js Fiddle is here
Source code is avaible on GitHub.
Update 2020 For Bootstrap 4
I recommended bootstrap4-toggle in 2020.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<link href="https://cdn.jsdelivr.net/gh/gitbrent/[email protected]/css/bootstrap4-toggle.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/gh/gitbrent/[email protected]/js/bootstrap4-toggle.min.js"></script>
<input id="toggle-trigger" type="checkbox" checked data-toggle="toggle" data-onstyle="success">
<button class="btn btn-success" onclick="toggleOn()">On by API</button>
<button class="btn btn-danger" onclick="toggleOff()">Off by API</button>
<button class="btn btn-primary" onclick="getValue()">Get Value</button>
<script>
//If you want to change it dynamically
function toggleOn() {
$('#toggle-trigger').bootstrapToggle('on')
}
function toggleOff() {
$('#toggle-trigger').bootstrapToggle('off')
}
//if you want get value
function getValue()
{
var value=$('#toggle-trigger').bootstrapToggle().prop('checked');
console.log(value);
}
</script>
Solution 7 - Javascript
You can use the CSS Toggle Switch library. Just include the CSS and program the JS yourself: http://ghinda.net/css-toggle-switch/bootstrap.html
Solution 8 - Javascript
You can use the Material Design Switch for Bootstrap 3.3.0
http://bootsnipp.com/snippets/featured/material-design-switch
Solution 9 - Javascript
Bootstrap 4 solution
bootstrap 4 ships built-in toggle. Here is the documentation. https://getbootstrap.com/docs/4.3/components/forms/#switches
Solution 10 - Javascript
In case someone is still looking for a nice switch/toggle button, I followed Rick's suggestion and created a simple angular directive around it, [angular-switch][1]. Besides preferring a Windows styled switch, the total download is also much smaller (2kb vs 23kb minified css+js) compared to angular-bootstrap-switch and bootstrap-switch mentioned above together.
You would use it as follows. First include the required js and css file:
<script src="./bower_components/angular-switch/dist/switch.js"></script>
<link rel="stylesheet" href="./bower_components/angular-switch/dist/switch.css"></link>
And enable it in your angular app:
angular.module('yourModule', ['csComp'
// other dependencies
]);
Now you are ready to use it as follows:
<switch state="vm.isSelected"
textlabel="Switch"
changed="vm.changed()"
isdisabled="{{isDisabled}}">
</switch>
[![enter image description here][2]][2]
[1]: https://github.com/erikvullings/angular-switch "angular-switch" [2]: http://i.stack.imgur.com/ZHIFd.png