I'm struggling to understand why my custom CSS file isn't able to override the Bootstrap CSS. I know that my new CSS class should have higher priority than Bootstrap's, but for some reason, it's not working as expected. Here's the code snippet in question:
<nav class="navbar navbar-expand-lg navbar-light bg-light">If I change bg_light to bg_red, the background color changes to red. However, when I try to define it in an external CSS file using the same selector, it doesn't work.
The line in my CSS file looks like this:
nav.bg-light {
background-color: red;
}
I've even attempted to include all the classes in the selector:
nav.navbar.navbar-expand-lg.navbar-light.bg-light {
background-color: red;
}
Despite these efforts, the color still does not change. What am I overlooking? I'm eager to learn how to effectively override Bootstrap CSS for customization purposes. Thank you for your assistance.