How to install Bootstrap in a WordPress child theme

by

The question:

I want to add Bootstrap to a WordPress child theme that I edit using Elementor.

To do that, I used both CDN and bootstrap local files but neither worked. For the local files, I created a bootstrap folder in my child theme folder where I had only three folders : functions.php, screenshot.
Then, inside the bootstrap folder I created two other folders CSS and JS.

So now I have :

  • Child theme folder > boostrap > css
  • Child theme forlder > bootstrap > js

In the CSS folder, I uploaded the “bootstrap.min.css” file and in the JS folder, I uploaded the “bootstrap.bundle.js” file.

After that, I modified the functions.php file with the code below, but this does not work when I add custom HTML using Elementor. Did I miss something in the code or is there anything else I should do ?

I have a little experience with HTML, CSS and Bootstrap, but I’m a novice in PHP and JavaScript.

function child_enqueue_styles() {
    wp_enqueue_script( 'bootstrap-js', get_template_directory_uri() . '/bootstrap/js/bootstrap.bundle.js', array( 'jquery' ),'',true );
    wp_enqueue_style('bootstrap5-css', get_template_directory_uri() . '/bootstrap/css/bootstrap.min.css');
    wp_enqueue_style( 'my-site-theme-css', get_stylesheet_directory_uri() . '/style.css', array('astra-theme-css'), CHILD_THEME_MY_SITE_VERSION, 'all' );
}
add_action( 'wp_enqueue_scripts', 'child_enqueue_styles', 15 );

It’s been 3 hours now that I’m trying to implement this, and it’s driving me crazy.

Thank you very much for your help !

The Solutions:

Below are the methods you can try. The first solution is probably the best. Try others if the first one doesn’t work. Senior developers aren’t just copying/pasting – they read the methods carefully & apply them wisely to each case.

Method 1

get_template_directory_uri() always points to the parent theme.

To get the child theme use get_stylesheet_directory_uri().


All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

Leave a Comment