What is better way to use Bootstrap inside admin panel?

You can write the content of the bootstrap.css file in a scss file and manipulate it.

Put all the Bootstrap classes in a wrapper container (for example with the .bootstrap-wrapper class).

:root { /* write bootstrap variables here... */ } .bootstrap-wrapper { /* Write the content of bootstrap.css here */ } 

Be careful when changing Bootstrap css.

After compiling the scss file and inserting it into the admin area, you can use Bootstrap as follows:

<div class="bootstrap-wrapper"> <!-- Use Bootstrap here... --> </div> 

I upvoted the answer from @امیرحسین منصورکیایی because it works, at least partially.

Here is the approach I followed to reduce the "global" impact from bootstrap and to use Bootstrap's grid system and accordion for a WordPress Admin Widget.

• Created a new folder in my plugin project and performed "npm init" on it.
• Installed bootstrap source and sass via "npm install bootstrap sass".
• Edited the file _reboot.scss in node_modules/bootstrap/scss and basically commented out all rules but left empty rules for h1 - h6, small and mark.
• Created a new styles.scss file in the root of the folder (see below).

.my-custom-widget { @import "./node_modules/bootstrap/scss/bootstrap"; } 

• Build and minified the custom version of Bootstrap via "npx sass styles.scss ./../styles.min.css --style=compressed".
• Enqueued the custom version of Bootstrap in the callback that is hooked up with "wp_dashboard_setup".
• Wrapped the widget in a div with class "my-custom-widget".

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