How can I override Bootstrap css with my child theme css in wordpress?

  • ywca9813

    (@ywca9813)


    1 year, 11 months ago

    I am trying to load my site’s child theme’s css after Bootstrap CDN css in wordpress. I tried using these code but it doesn’t work. The Bootstrap css is not overriden. What should I do to fix that?

    function override_css() {
    wp_enqueue_style( 'bootstrap.min', 'https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css' );
    wp_enqueue_style( 'style', get_stylesheet_directory_uri() . '/style.css', array(), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'override_css' );
Viewing 3 replies - 1 through 3 (of 3 total)
  • Moderator bcworkz

    (@bcworkz)

    1 year, 11 months ago

    Try
    wp_enqueue_style( 'style', get_stylesheet_directory_uri() . '/style.css', array('bootstrap.min'), '1.0.0', true );
    This ensures “style” is loaded after “bootstrap.min”. The order you enqueue in is not reliable enough.

    The styles in “style” still need to work with CSS precedence rules. The latter style still needs to have selectors of equal or greater specificity to effectively override. In some cases you may still be forced to use the !important modifier. You will not be able to override element style attributes from external CSS files.

    Thread Starter ywca9813

    (@ywca9813)

    1 year, 11 months ago

    Thank you for the reply.
    I tried using array(bootstrap.min) but it didn’t work too. I ended up copying the css I need to the additional css…
    I was able to do that (override) before, but I deleted the wrong files and recovered the site once, after that I lost the code for the successful override and haven’t been able to do that since then…

    Moderator bcworkz

    (@bcworkz)

    1 year, 11 months ago

    TBH, Additional CSS is the best way to override because the resulting inline style has greater precedence than equivalent rules in an external file.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘How can I override Bootstrap css with my child theme css in wordpress?’ is closed to new replies.