Change bootstrap4 styles

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?

<!-- Stylesheets -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/magnific-popup.css">
<link rel="stylesheet" href="css/styles.css?v=<?php echo time(); ?>">
<link rel="stylesheet" href="css/styles2.css?v=<?php echo time(); ?>">
<link rel="stylesheet" href="css/mediaqueries.css">
<!-- Script -->
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/bootstrap-portfilter.js"></script>
<script src="js/owl.carousel.min.js"></script>
<script src="js/jquery.downCount.js"></script>
<script src="js/jquery.magnific-popup.min.js"></script>
<script src="js/bootstrap-datepicker.js"></script>
<script src="js/jquery.touchSwipe.min.js"></script>
<script src="js/functions.js"></script>
<script src="js/moment.min.js"></script>
<script src="js/moment-with-locales.min.js"></script>
<script src="js/consts.js?v=<?php echo time(); ?>"></script>
<script src="js/main.js?v=<?php echo time(); ?>"></script>

Likely a specificity issue. Try using !important after the property value you are overwriting.

That’s the first thing I try. It doesn’t work.

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.

1 Like

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.

https://www.youtube.com/results?search_query=debugging+css+with+chrome+devtools

1 Like

I wanna reach that select to make It wider, just using his ID at the very end in the CSS doesn’t work. Any other strategies?

Using bootstrap 4. I change the .min.css but in browser nothing happends.

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.

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