I'm facing an issue with my custom CSS not being able to override bootstrap on this specific site.
Although I have experience using bootstrap on various platforms without any issues, I am currently working on a WordPress project for a client where nothing seems to work. No matter what I do, I am unable to apply background colors or other customizations to classes within divs as they simply won't display. Even using pre-existing bootstrap classes inside divs is ineffective. It's as if my CSS file is not being recognized at all. For instance:
.my-blue-background {
background-color: blue;
}
<div class = "container my-blue-background">
...
</div>
Or:
<div class = "my-blue-background">
<div class = "container">
...
</div>
</div>
And also:
<div class = "container text-center">
<h1>Hello World!</h1>
</div>
Moreover:
<div class = "container">
<h1 class = "text-center">Hello World!</h1>
</div>
I've tried using !important. I've even attempted copying CSS files and pages from other themes, which worked fine, but any attempt to modify their custom stylesheet does not reflect the changes. Deleting their custom stylesheets doesn't show any difference on my website either. I've cleared cache, tested on different browsers and devices, and confirmed that my enqueues are set up correctly by trying both methods:
wp_register_style('bootstrap', get_template_directory_uri() . '/inc/css/bootstrap.min.css', false, '4.0.0', null);
wp_enqueue_style('bootstrap');
wp_register_style('customstyle', get_template_directory_uri() . '/inc/css/custom.css', false, '0.0.1', null);
wp_enqueue_style('customstyle');
As well as:
wp_register_style('bootstrap', get_template_directory_uri() . '/inc/css/bootstrap.min.css', false, '4.0.0', null);
wp_register_style('customstyle', get_template_directory_uri() . '/inc/css/custom.css', false, '0.0.1', null);
I'm at a loss as to why this isn't working on my configured settings. Any insights or solutions would be greatly appreciated.