Bootstrap 4 fix without altering original js/css

[jadjare]

If you want to update the official version of bootstrap-toggle to work with Bootstrap 4, without altering the source js / css or forking the project, you can add the following CSS tweaks to your own css file.

/* Bootstrap Toggle v2.2.2 corrections for Bootsrtap 4*/
.toggle-off {
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
}
.toggle.off {
    border-color: rgba(0, 0, 0, .25);
}

.toggle-handle {
    background-color: white;
    border: thin rgba(0, 0, 0, .25) solid;
}

This will restore the shadow applied to the toggle button when it's in its off position, ensure there is a border around the toggle switch when it's off and finally ensure the toggle switch handle is white. This pretty much mimics the appearance of the toggle switch when used with Bootstrap 3.3.7.

You can still use the data-onstyle and data-offstyle attributes to override the button styling using bootstrap classes, e.g. data-offstyle="warning" data-onstyle="danger"

If you don't override the data-offstyle attribute then the original Bootstrap 3 class btn-default is used. As this doesn't exist in Bootstrap 4 you simply end up with a transparent background, matching whatever colour is behind the button.

[solarcloud7]

Thank you!

[Thabet-Do]

Thanks 💯

[ghabxph]

This should be added to pull request!

My personal solution is sufficed by just adding white background to .toggle-handle. But this one is much more perfect.

[jeppebundsgaard]

When using custom text the width isn't set correctly in bootstrap 4, but you can set the width using the attribute data-width="200" (or whichever width you want).

[pathaugen]

I came across Bootstrap Toggle and thought it interesting but found the handle missing bug which this solution solves.

This should be rolled into the master for immediate release as it is broken out of box without this.

[djibe]

Hi guys I completly fail to make it work with Bootstrap 4 daemonite https://jsfiddle.net/djibe89/dxch0Lrf/ Anyone can help with this fiddle ?

[dterg]

Any ideas about the size? "mini" doesn't seem to work with Bootstrap 4

[zkost]

Adding the following to jadjare's css mod works for me but admittedly it needs to be tested across all browsers. Mind you that I'm only using the mini style across my app so this may break the other sizes of the toggle (not tested).

.toggle-handle { background-color: white; border: thin rgba(0, 0, 0, .25) solid; margin-top: -9px; }

Please correct and enhance this mod as necessary.

[thedustyrover]

I ran into some slight flickering issues while toggling, and fixed with the following instead:

.toggle > .toggle-group {
    background:white;
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
    color:#666;
}

.toggle.off {
    border-color: rgba(0, 0, 0, .25);
}

.toggle-handle {
    background-color: white;
    border: thin rgba(0, 0, 0, .25) solid;
}

[wduvan]

I finally found it, thanks

Bootstrap v4.0.0

[HDias]

Very good!

[groundh0g]

Adding the following to jadjare's css mod works for me but admittedly it needs to be tested across all browsers. Mind you that I'm only using the mini style across my app so this may break the other sizes of the toggle (not tested).

.toggle-handle { background-color: white; border: thin rgba(0, 0, 0, .25) solid; margin-top: -9px; }

Please correct and enhance this mod as necessary.

The data-size="mini" appears to be broken because BS4 doesn't have the btn-xs style anymore. You can navigate to the v3.3.7 examples, inspect the xs button, and copy the styles to your css. Shouldn't break the other styles.

.btn-xs,
.btn-group-xs > .btn {
    padding: 1px 5px;
    font-size: 12px;
    line-height: 1.5;
    border-radius: 3px;
}

[joseouluis]

Adding the following to jadjare's css mod works for me but admittedly it needs to be tested across all browsers. Mind you that I'm only using the mini style across my app so this may break the other sizes of the toggle (not tested). .toggle-handle { background-color: white; border: thin rgba(0, 0, 0, .25) solid; margin-top: -9px; } Please correct and enhance this mod as necessary.

The data-size="mini" appears to be broken because BS4 doesn't have the btn-xs style anymore. You can navigate to the v3.3.7 examples, inspect the xs button, and copy the styles to your css. Shouldn't break the other styles.

.btn-xs,
.btn-group-xs > .btn {
    padding: 1px 5px;
    font-size: 12px;
    line-height: 1.5;
    border-radius: 3px;
}

it works perfectly well!