0

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?

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'.

  • Hi, I did the same with the correct directory path but the web page gives an HTTP 500 error. – Mithun Nath Jul 31 '17 at 2:28
  • Hi, Now that HTTP 500 error is gone, but still the bootstrap styles are not working! – Mithun Nath Jul 31 '17 at 3:20
  • View the source code of the page and check for the link to your bootstrap css file. If it's there, click on it to see if it will load. – Cedon Jul 31 '17 at 17:19

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.