Bootstrap CSS overwrites X Theme CSS

Bootstrap instructions say to link the Bootstrap stylesheet before all other stylesheets in . Using function my_custom_head_output() in functions.php (child theme) for this purpose results in unwanted CSS changes (e.g. page link colors designated in X Theme’s Global CSS are replaced with default Bootstrap colors). I believe this is because a function such as my_custom_head_output() is placed at the bottom of .

How do I link a stylesheet before all other stylesheets?

Bootstrap Guide: https://getbootstrap.com/docs/4.1/getting-started/introduction/

Hi there,

To load the CSS first, try adding a priority 1 to the wp_head like this:

add_action( 'wp_head', 'wpse_239006_style', 1 );
function wpse_239006_style() {
   wp_enqueue_style( 'fhttps://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css' );
}

Hope this helps.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.