Why won't my custom button work when I use Bootstrap 4 styling?

[geolectric]

When I try to use Bootstrap 4 to style my button the click doesn't work, but when I just change it to tpl: '<button class="f-button">Order</button>' like in the examples it works fine.

I can't figure out why...

$(function () {
    const options = {
        contentClick: 'iterateZoom',
        Images: {
            Panzoom: {
                maxScale: 2,
            },
            protected: true,
        },
        Toolbar: {
            items: {
                order: {
                    tpl: `<button class="btn btn-success font-weight-bold px-5 m-2">Order</button>`,
                    click: (toolbar) => {
                        console.log(toolbar.instance.getSlide().uuid);
                    },
                },
            },
            display: {
                left: ['infobar', 'prev', 'next'],
                middle: ['order'],
                right: ['zoomIn', 'zoomOut', 'close'],
            },
        },
    };
    Fancybox.bind('[data-fancybox="products"]', options);
});

[geolectric]

I figured it out... I added a class and set this CSS property: pointer-events: all; and now the button works.