Adding bootstrap4.min.js for header messes up forum UI

divan

I decided to equalize the header on the main site and on the Flarum forum, and copy-pasted HTML/CSS/JS for header menu from the website to the Custom header.
This code contains import of bootstrap4 minimized CSS file. As soon as it's included forum UI is messed up in a few places (I don't think I explored all the broken/misaligned parts, reverted it immediately as there is no way to safely test it).

The question is – is a known issue or I'm doing something wrong? I believe custom header is not that rare use case, and many headers contain bootstrap/jquery for menus and for handling responsive menus. So my guess is that is should be known issue.

And advice how to deal with such a problem?

PS. I run Flarum beta8.

askvortsov

divan it's likely that there are some css class names shared between bootstrap and Flarum's CSS. This can (and probably has) result in UI breaks. You should try only importing css that you need and that doesn't conflict with Flarum's styles.

datitisev

divan Flarum uses Bootstrap 3 JS - and perhaps some CSS as well, can't really remember. As askvortsov said, they may be conflicting.

Furthermore, we do not provide support for old versions - and you are quite a bit behind our newest beta.

Adding bootstrap 4 code will most likely break everything.

divan

askvortsov right, thank you. So you recommend creating a custom build of bootstrap that only includes parts that I think are needed?

divan

datitisev thanks for clarification.
I'm planning to upgrade, yes, a bit reluctant as I'm afraid to break everything. (never upgraded Flarum previously)

datitisev

divan custom build of bootstrap that only includes parts that I think are needed?

I don't know. The only thing you can do is go ahead and test that out.