Bad UX for Checkbox Button on mobile browser

Created by: Juchar

Bug description:

Using the checkbox buttons on a mobile browser (Chrome Browser 67.0.3396.87 on Android) if you uncheck/check a button it will not show the proper styling as it seems to be still hovered.

This is resulting in really bad UX (imho) due to the fact that for the overall user the button still seems to be unchecked (this is especially annoying for outlined buttons and button groups).

You can see the difference between checked and unchecked in the below screenshots on the checkbox button (or at least you can see that there is nearly no difference):

Reproduction:

You can check this by simply accessing the demo here using a mobile browser: http://getbootstrap.com/docs/4.1/components/buttons/#checkbox-and-radio-buttons

Version of Bootstrap:

Bootstrap: 4.1.0