include bootstrap into wordpress plugin front-end

Question

is there any way to including bootstrap into our custom plugin without affecting theme ccs/js files?

I have include a php file with included bootstrap library at the head. when I activate my plugin something in my homepage changing

Answer 1

Bootstrap has predefined styles for some tags like buttons, nav, ... which is why it will override your theme style for these elements.

You could add an id to your body tag (for example: id="something") and then add #something in your theme's css rules in front of the styles overridden by bootstrap so that your theme's css will take precedence.

#nav {} would become #something #nav {}

See this as it's similar: How can I override Bootstrap CSS styles?

Answer 2

go to functions.php in root directtory of your project and try to add this

    function monthem_register_assets(){
        wp_register_style('bootstrap','https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css');
        wp_register_script('bootstrap','https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js');
        wp_enqueue_style('bootstrap');
        wp_enqueue_script('bootstrap');
    }

add_action('wp_enqueue_scripts','monthem_register_assets');