What is better way to use Bootstrap inside admin panel?

Question

I need to use Bootstrap CSS for better UI in wp-admin but if I enqueue the bootstrap.css, it's affecting the admin default UI by changing background colors, etc.

How can I use bootstrap.css inside wp-admin?

Answer 1

As @N00b said, if a selector matches between bootstrap and wordpress, and is more specific, then it will overwrite and you'll see the changes.

Answer 2

if you add pages via add_menu_page or add_submenu_page, and only need your css there, those function return a hook, which you can use with the load-$your_hook action. And with said hook, you can load your css only on this specific page. for example:

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 );
}