it is not working with bootstrap 4

[gibbsvjy007]

I am using latest bootstrap version and want to integrate your library. I am making web application using angular. I tried all possible ways but always it appears simple checkbox without any design applied. I checked in the DOM CSS and JS file of bootstrap-toggle is loaded properly..

Can you please help me to fix this ?

[jp1337]

Hey gibbsvjy007,

I had the same issue an hour ago.
Here is my solution:

Replace the following strings in bootstrap-toggle.js and bootstrap-toggle.min.js:

Step 1

Toggle.DEFAULTS = {
	...
	offstyle: 'default',
	...
}

has to be

Toggle.DEFAULTS = {
	...
	offstyle: 'secondary',
	...
}

Step 2

Replace var $toggleHandle = $('<span class="toggle-handle btn btn-default">')
with var $toggleHandle = $('<span class="toggle-handle btn btn-secondary">')

[gibbsvjy007]

@kingjp
Thanks for the solutions. This is also a nice solution.
But I managed to do this with the following library.

[http://ziscloud.github.io/angular-bootstrap-toggle/]

It is working without any changes in the library.
Hope it will help you.

Best,
Vijay

[jodier]

Hi!

I also suggest to replace:
var $toggleOff = $('').html(this.options.off)
.addClass(this._offstyle + ' ' + size + ' active')
by:
var $toggleOff = $('').html(this.options.off)
.addClass(this._offstyle + ' ' + size)

With this modification, it is possible to use the new "outline" classes, for example:
data-onstyle="outline-warning" data-offstyle="outline-secondary"

Best regards,
Jérôme Odier

[deepakmahakale]

I have already raised a pull request 2 years ago #143