Bootstrap overrides my css
I cannot really include many lines of code or pictures here and keep this simple and short at the same time so please don't down vote this without reading. I added bootstrap css link to partially use it in my django app, but it overrides some of my own css codes. I already saw similar questions on the forum, but either they were incomplete or totally unorthodox methods. Is there really a better way of doing this? My bootstrap code is above my css code link in my html file, and also I know about tag priorities and none really helped.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="{% static 'css/bootstrap-iso.css' %}">
<link rel="stylesheet" type="text/css" href="{% static 'css/static-menu.css' %}">
I know your frustration since I have gone through it too, but the good news is that I found a way, which is the best way and it never left any problems behind. The way is to intelligently modify your bootstrap css file and change it to bootstrap-iso, and in this case bootstrap will not touch your css. And the good part is that you can style any part of your code with bootstrap IF YOU SAY SO. To do that you simply use a div and mention bootstrap-iso like this:
<div class="bootstrap-iso">
<!-- Any HTML here will be styled with Bootstrap CSS -->
</div>
This is a reference that explains it with detailas and with snapshots and I cannot include them all.
You may have a problem compiling LESS file. I figured out that installing npm is the way to go instead of using command line. Remember to run command line as administrator if you chose to use command line in any step.