X-Editable and Bootstrap 4

It seems that this is bug in bootstrap 4. Bootstrap 4 is currently in beta release.

Check below link : https://github.com/vitalets/x-editable/issues/950

There is a new release that support Bootstrap 4:

https://github.com/Talv/x-editable/tree/develop/dist/bootstrap4-editable

Just to help anyone else who has this problem, here is how I dealt with it. I switched to inline mode:

 $(document).ready(function() {
        $('.comment').editable({
            mode: 'inline',
        });
        $('.hours').editable({
            mode: 'inline',
            type: 'number',
            step: '1.00',
            min: '0.00',
            max: '24'
        });
    });

This works OK but the buttons don't render any images due to glyphicons no longer being supported.

I added font-awesome and then used the following css to get the icons back:

        .glyphicon-ok:before {
        content: "\f00c";
    }
    .glyphicon-remove:before {
        content: "\f00d";
    }
    .glyphicon {
        display: inline-block;
        font: normal normal normal 14px/1 FontAwesome;
        font-size: inherit;
        text-rendering: auto;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

All seems to work as before. Thanks to Sadhu for pointing me in the right direction.