Screen Options & Help Buttons not working when including Bootstrap Css

Question

Check if you or a plugin include bootstrap and the bootstrap CSS / Theme files.

Bootstraps .hidden class looks like:

.hidden {
  display: none !important;
}

But overrides wordpress’ definition of .hidden:

.hidden {
  display: none;
}

The Top ‘Help’ & ‘Screen Options’ bars are displayed via inline style display: block, which is overridden by bootstraps .hidden {display: none !important} css class.

This can be fixed by rewriting the Top Bars Css via Jquery / JS.

Working example:

jQuery(document).ready(function ($) {
    $("#contextual-help-link").click(function () {
        $("#contextual-help-wrap").css("cssText", "display: block !important;");
    });
    $("#show-settings-link").click(function () {
        $("#screen-options-wrap").css("cssText", "display: block !important;");
    });
});