theme style.css being loaded before bootstrap.css file


I created a child theme from the Dazzling theme. But I noticed that the dazzling parent style.css is being loaded before the bootstrap css files, then comes my child style.css file.

This is not a huge deal, but a lot of things that the dazzling css overrides from bootstrap, I have to do manually in my style.css file.

Does anyone know a way to fix this so that the order of the css files is correct?

Thank you.

Found a solution. You have to add the dazzling-bootstrap css file in your childs function.php, like so:

add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
    wp_enqueue_style( 'dazzling-bootstrap', get_template_directory_uri() . '/inc/css/bootstrap.min.css' );
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );

Instead of using this “advanced” function you could have just used simple:

@import url("…/dazzling/style.css");

via Child Theme style.css that way you wouldn’t need to prioritize how stylesheets are being loaded and everything would just work.

That will also work. But it’s considered bad practice to use @imports in child themes to get the parent styles. Wordpress recommends using the function above.