plugin development - What is better way to use Bootstrap inside admin panel?

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?

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?

• plugin-development
• theme-development
• css
• twitter-bootstrap
• admin-css

Share Improve this question edited Jun 17, 2016 at 12:55 Gabriel 2,2481010 gold badges2222 silver badges2424 bronze badges asked Jun 17, 2016 at 12:00 Bhavesh NariyaBhavesh Nariya 13755 bronze badges 2

• 1 That's how CSS works: if selector matches and it's more specific, it will overwrite the other rules. – N00b Commented Jun 17, 2016 at 14:15
• 1 This is why I dislike Bootstrap - it's not semantic and causes more problems than it's worth. Maybe you can explain why you need to use Bootstrap and we might be able to suggest other solutions? Be careful of the XY problem. – Tim Malone Commented Jun 17, 2016 at 21:21

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 0

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.

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