Hi folks!
I’m new using Bootstrap 4 and I have a project bootstrap.css and JS. The problem is that Web Browser is reading boostrap.min.css BUT when I change a class like .modal-content { } (only exist in boostrap.min.css ) nothing happends, but using dev tools in browser I can change it easily.
Any Idea of what Its happening?
Is this your own class or are you trying to overwrite a Bootstrap class? You said .modal-container, I see no such class in the docs for the modal component.
Anyway, I really have no way of helping you based just on what you have posted. The CSS files load order suggests it shouldn’t be a cascade issue and if you are sure you are overwriting styles using selectors with high enough specificity and have tried using !important for the style rules there is little more I can say without seeing the page.
sorry, modal-content it’s the class.
Yes, I provide almost 0 information, because the files are huge and I’m like a mad making grep -R in the project directory searching patterns. I’m gonna slow down and see with more detail some code blocks.
The developer tools are really all you need they show you the order the styles are being applied in, and it shows you what styles are being overwritten. Maybe spend a bit more time learning about the Styles part of the Inspector and see if you can’t figure out what is happening.
BTW, if you apply styles in the developer tools to the top selector, element.style in Chrome or just element in Firefox, you are applying them as inline styles. If they work but the class styles do not then it is almost certainly a specificity issue.
I don’t know why you can’t make it work. There is nothing that should prevent you from setting a width on the select element. Post an image of the Styles tab with the element selected so we can see the styles being applied.