bootstrap-toggle checkbox is not showing up as toggle

Question

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

Answer 1

If you are using, Bootstrap v2.3.2, then you should be using bootstrap2-toggle.min.js and bootstrap2-toggle.min.css.

Make sure you load the bootstrap-toggle.css after the main bootstrap.css file.

Also, make sure load the bootstrap-toggle.js after the main bootstrap.js. right before you close the body tag.

Don't forget the jquery, it needs to go before both js files.

Answer 2

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.

Answer 3

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.