I am using angular, and added bootstrap-toggle using bower. I also included the appropriate css, and js files in my index.html. In my resource file, I need to create a toggle switch. I include the following line:
<div>
<input type="checkbox" checked data-toggle="toggle">
</div>
I don't want to add this line using javascript. It is showing up as a checkbox rather than a toggle. Is there something that I am missing? css link snapshopt js links snapshot
For future readers.
I have fixed the issue by loading jquery and bootstrap js files before bootstrap toggle js.
Same for css files. First bootstrap css and then bootstrap toggle css.
It is better to include the .min.css and .min.js since these versions are minified meaning all whitespace removed to reduce file size and increase speed.
Firstly include jquery JS.
<script src='https://code.jquery.com/jquery-1.10.2.js'></script>
You need to include bootstrap-toggle.min.css after the main bootstrap.min.css file.
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css'>
<link href='https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css' rel='stylesheet'>
Then also include, bootstrap-toggle.min.js followed by bootstrap.min.js.
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js'></script>
<script src='https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js'></script>
Now your checkbox will work as a toggle-checkbox.