Bootstrap doesn't work on admin menu page-How to override wp-admin style?

Question

I am building a plugin and i use bootstrap to style it but i notice some components styles don't work properly.Someone suggested in a blog post to use wp_deregister_style('wp-admin'); which did fix my issues but broke the rest of the wp-admin page.

Is there a way to override the css that loads in the wpbody-content?

Answer 1

It turned out that there was already a .card class from wp that had some extra attributes than bootstrap's so they were overriding it.

Answer 2

If your bootstrap.css is loaded correctly with the admin_enqueue_scripts action, there might be a stricter selector in an other css file which overrides your style.
The stylesheet with the most precisely selector wins the battle of styling your element.

Answer 3

In case you only want Bootstrap in your plugin menu page. Use $hook = add_menu_page() instead of add_menu_page() . And use that hook to load any styles, scripts

add_action( 'admin_menu', 'register_page');

function register_page()
{
  $my_hook = add_menu_page( 'tab title', 'page title', 'manage_options', 'my-page-slug', 'callback_function', 'dashicons-cloud', 1 );

  add_action( 'load-'.$my_hook, load_scripts );
}


function load_scripts ()
{
  add_action( 'admin_enqueue_scripts', 'enqueue_bootstrap' );
}

function enqueue_bootstrap()
{
  $path = plugins_url( 'my_plugin/inc/css/bootstrap.min.css' ); //use your path of course
  $dependencies = array(); //add any depencdencies in array
  $version = false; //or use a version int or string
  wp_enqueue_style( 'myplugin-bootstrap', $path, $dependencies, $version );
}