toggle.css is a css switch library, it can allow us to create customizable bootstrap style toggle buttons with pure css.
How to create bootstrap style toggle buttons using toggle.css?
1.Import bootstrap css style and toggle.css in your html page
<link rel="stylesheet" href="/path/to/bootstrap.min.css"> <link rel="stylesheet" href="/path/to/toggle.min.css">
2.Create a checkbox input witch class tgl and theme class. Available themes:
- tgl-default
- tgl-primary
- tgl-success
- tgl-info
- tgl-warning
- tgl-danger
<input type="checkbox" class="tgl tgl-default" id="example"> <label for="example">Toggle</label>
3.You also can use following css classes to change the size of toggle button.
- tgl-default
- tgl-sm
- tgl-md
- tgl-lg
<input type="checkbox" class="tgl tgl-primary tgl-sm" id="example2"> <label for="example2">Toggle</label>
4.You also can use multiple themes in one checkbox.
<input type="checkbox" class="tgl tgl-default tgl-on-primary" id="example3"> <label for="example3">Toggle</label>
