Why does bootstrap break wordpress admin?

1 Views

Consider the following plugin code for wordpress: 

<?php
/**
 * Plugin Name: test
 * Description: This plugin is just a test for bootstrap css
 * Version: 1.0.0
 * Author: Gavin Simpson
 * License: GPL2
*/

class testclass
{
    private static $instance;
    public static function get_instance_advert() 
    {
        if( null == self::$instance )
        {
            self::$instance = new testclass();
        }
        return self::$instance;
    }

    private function __construct()
    {
        add_action( 'admin_enqueue_scripts', array($this,'inistyleheets'));
    }
    function inistyleheets()
    {
        wp_register_style( 'mybootstrap', plugins_url() . '/test/assets/bootstrap-3.3.5-dist/css/bootstrap.min.css');   
        wp_enqueue_style('mybootstrap');
    }
}
add_action( 'plugins_loaded', array( 'testclass', 'get_instance_advert'));
?>

When activating the above, the ‘Screen Options’ button in WordPress Admin stops working.

Read More

The problem is 100% related to loading the Bootstrap css only, hence the example doesn’t load bootstrap itself. In my production code, bootstrap works perfectly, it just breaks the ‘Screen Options’ button as described, just like the basic plugin code above.

I have tried all the basic themes, i.e. twentyfourteen, twentyfifteen& twentysixteen. No luck with any of them, all the same result.

Post Views: 1

Related posts

3 comments

  1. Long winded solution, so will not repeat it here, but the link is
    https://rushfrisby.com/using-bootstrap-in-wordpress-admin-panel. (Yes, I know posting a link is not cool, but I do not want to copy and paste someone else’s solution)

    The bottom line is, you need to wrap any code you might want to add Bootstrap CSS to, and the solution in the above link takes care of loading Bootstrap in a way that works very nicely.

  2. For the case of the “Screen Options” button not working ( and possibly some other cases ) you can try to use

    .hidden[style*='display: block'] {
    display:block !important;
}

    in some CSS loaded after bootstrap. Limited testing is showing that the button now works but the contents of the dropdown do look different due to Bootstrap styling. Because of this I’ve limited the enqueuing of bootstrap to only the admin screens I really need to have it on. I’m not sure it’s worth it to me to try to fix the styling of that element.

  3. I have found the issue is with a classname on the controls within the Screen Options panel, wordpress load-options css contains an entry that targets elements with the ‘hidden’ class and sets ‘display: none‘ that makes sure those element are not displayed initially.

    when you click the “Screen Options” button it triggers a javascript function that should make that panel appear because it sets a style property on those elements with ‘display: block’ this should override css statements.

    however the bootstrap css also has a css statement that targets the classname ‘hidden’ but contains ‘display: none !important’ the ‘!important’ causes the bootstrap css statement to keep overriding the ‘display: block’ that is set on the element itself. so a dirty solution would be to remove the !important part from the bootstrap css.

Comments are closed.