All of my custom Bootstrap styles are not working in my child theme!

Question

I'm trying to create a child theme for Betheme.

I styled most of the elements in my child theme using Bootstrap separately as HTML templates and later integrated with my child theme.

But, none of them worked!

It is now in their default styles.

What I did is that I downloaded Bootstrap.min.css file into my child theme and imported that into the style.css file with @import();

I'm not sure if that is the correct way to do it as I'm a newbie at Wordpress. Or it has something to do with the parent theme.

As I said, when these bootstrap elements are out of WordPress in an HTML file, it works just fine. So I'm guessing that I import the Bootstrap files into my child theme in the wrong way.

Any suggestions?

Answer 1

In your child theme's function.php file, find the enqueue function and add it there instead of using @import in your CSS.

For example:

function my_scripts_and_styles() {
    wp_enqueue_style( 'main-style', get_stylesheet_uri() );
    wp_enqueue_style( 'bootstrap-style', get_template_directory_uri() . '/css/bootstrap.min.css', array( 'main-style', '', true );

    if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
        wp_enqueue_script( 'comment-reply' );
    }
}
add_action( 'wp_enqueue_scripts', 'my_scripts_and_styles' );

What this function will do is load your style.css file, then load bootstrap.min.css only if style.css is successfully loaded (NOTE: It assumes bootstrap.min.css is located in /wp-content/themes/{your theme}/css so adjust that code accordingly.

wp_head() will take it from there. If you need bootstrap to load first, then move the array() argument to main-style and change the contents to 'bootstrap-style'.