How to install Bootstrap in a WordPress child theme

admin管理员组

文章数量:1291314

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 !

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 !

• child-theme
• twitter-bootstrap

Share Improve this question edited May 31, 2021 at 5:57 bueltge 17.1k77 gold badges6262 silver badges9797 bronze badges asked May 28, 2021 at 16:25 DownforuDownforu 10322 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 1

get_template_directory_uri() always points to the parent theme.

To get the child theme use get_stylesheet_directory_uri().

本文标签： How to install Bootstrap in a WordPress child theme