Custom CSS not applying for Bootstrap

Question

newbie in Bootstrap here. I am trying to make a simple blog in my Django project and it seems that my custom css does not work alongside bootstrap's. Overwriting it by using style tag on every line is tedious. The order in which I loaded the css and js is:

1. Bootstrap CSS
2. My own CSS
3. JQuery, Popper.js and Bootstrap.js

Then, in the navigation bar html I noticed that the href does not work, even with the correct link:

<li class="dropdown-item" href="#"><a>See all</a></li>

So, naturally I tried to put href into the a tag like so:

<li class="dropdown-item"><a class="nav-link" href="{% url 'blog_index'%}">See all </a></li>

With that, the text "See all" becomes white and is not visible anymore since the background is also white. So as a work-around I changed style directly into this tag. Changing it by altering the nav-link class in the css file doesn't do anything. Also my html page:

 .nav-link a{ color: black; }.navbar.dropdown-toggle, .navbar.dropdown-menu a{ cursor: pointer; }.navbar.dropdown-item.active, .navbar.dropdown-item:active { color: inherit; text-decoration: none; background-color: inherit; }.navbar.dropdown-item:focus, .navbar.dropdown-item:hover { color: #16181b; text-decoration: none; background-color: #f8f9fa; } @media (min-width: 767px) {.navbar.dropdown-toggle:not(.nav-link)::after { display: inline-block; width: 0; height: 0; margin-left: .5em; vertical-align: 0; border-bottom: .3em solid transparent; border-top: .3em solid transparent; border-left: .3em solid; } }.navbar-dark.navbar-nav.nav-link { color: red;important; }

 <link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <,--Custom CSS--> <.-- JQuery, Popper:js. Bootstrap js scripts --> <script src="https.//code.jquery.com/jquery-3.5.1:min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script> <script src="https.//cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <div class="navbar navbar-expand-md navbar-dark bg-dark mb-4" role="navigation"> <a class="navbar-brand" href="#">Logo</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarCollapse"> <ul class="navbar-nav mr-auto"> <li class="nav-item active"> <a class="nav-link" href="{% url 'index'%}">Home <span class="sr-only">(current)</span></a> </li> <li class="nav-item"> <a class="nav-link" href="#" target="_blank">Github</a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" id="dropdown1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Projects</a> <ul class="dropdown-menu" aria-labelledby="dropdown1"> <li class="dropdown-item" href="#"><a>See all</a></li> <li class="dropdown-item dropdown"> <a class="dropdown-toggle" id="dropdown1-1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Categories</a> <ul class="dropdown-menu" aria-labelledby="dropdown1-1"> <li class="dropdown-item" href="#"><a>Action 1.1</a></li> <li class="dropdown-item dropdown"> <a class="dropdown-toggle" id="dropdown1-1-1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown1.1.1</a> <ul class="dropdown-menu" aria-labelledby="dropdown1-1-1"> <li class="dropdown-item" href="#"><a>Action 1:1;1</a></li> </ul> </li> </ul> </li> </ul> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" id="dropdown2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Blog</a> <ul class="dropdown-menu" aria-labelledby="dropdown2"> <li class="dropdown-item" href="#"><a>Latest</a></li> <li class="dropdown-item" href="#"><a>Popular</a></li> <li class="dropdown-item"><a class="nav-link" href="{% url 'blog_index'%}" style="color: black; padding. 0cm." >See all </a></li> <li class="dropdown-item dropdown"> <a class="dropdown-toggle" id="dropdown2-1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Categories</a> <ul class="dropdown-menu" aria-labelledby="dropdown2-1"> <li class="dropdown-item" href="#"><a>Math</a></li> <li class="dropdown-item" href="#"><a>IT Security</a></li> <li class="dropdown-item" href="#"><a>Machine Learning</a></li> <li class="dropdown-item dropdown"> <a class="dropdown-toggle" id="dropdown2-1-1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown2.1.1</a> <ul class="dropdown-menu" aria-labelledby="dropdown2-1-1"> <li class="dropdown-item" href="#"><a>Action 2.1.1 A</a></li> <li class="dropdown-item" href="#"><a>Action 2.1.1 B</a></li> <li class="dropdown-item" href="#"><a>Action 2.1.1 C</a></li> </ul> </li> <li class="dropdown-item dropdown"> <a class="dropdown-toggle" id="dropdown2-1-2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown2.1.2</a> <ul class="dropdown-menu" aria-labelledby="dropdown2-1-2"> <li class="dropdown-item" href="#"><a>Action 2.1.2 A</a></li> <li class="dropdown-item" href="#"><a>Action 2.1.2 B</a></li> <li class="dropdown-item" href="#"><a>Action 2.1.2 C</a></li> </ul> </li> </ul> </li> </ul> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" id="dropdown2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Quizzes</a> <ul class="dropdown-menu" aria-labelledby="dropdown2"> <li class="dropdown-item" href="#"><a>See all</a></li> <li class="dropdown-item dropdown"> <a class="dropdown-toggle" id="dropdown2-1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Categories</a> <ul class="dropdown-menu" aria-labelledby="dropdown2-1"> <li class="dropdown-item" href="#"><a>Action 2.1 A</a></li> <li class="dropdown-item dropdown"> <a class="dropdown-toggle" id="dropdown2-1-1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">History</a> <ul class="dropdown-menu" aria-labelledby="dropdown2-1-1"> <li class="dropdown-item" href="#"><a>Action 2.1.1 A</a></li> <li class="dropdown-item" href="#"><a>Action 2.1.1 B</a></li> <li class="dropdown-item" href="#"><a>Action 2.1.1 C</a></li> </ul> </li> <li class="dropdown-item dropdown"> <a class="dropdown-toggle" id="dropdown2-1-1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Flags</a> <ul class="dropdown-menu" aria-labelledby="dropdown2-1-1"> <li class="dropdown-item" href="#"><a>Historical Flags</a></li> <li class="dropdown-item" href="#"><a>National Flags</a></li> <li class="dropdown-item" href="#"><a>German Federal Flags</a></li> </ul> </li> <li class="dropdown-item dropdown"> <a class="dropdown-toggle" id="dropdown2-1-2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">IT</a> <ul class="dropdown-menu" aria-labelledby="dropdown2-1-2"> <li class="dropdown-item" href="#"><a>Ceasar's Cipher</a></li> <li class="dropdown-item" href="#"><a>Vigenere's Cipher</a></li> <li class="dropdown-item" href="#"><a>IT Security Basics</a></li> </ul> </li> </ul> </li> </ul> </li> </ul> <form class="form-inline mt-2 mt-md-0"> <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search"> <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button> </form> </div> </div> <main role="main" class="container"> <div class="jumbotron text-center"> <!-- Page Content --> {% block page_content %} {% endblock %} </div> </main>

What am I missing here?

Answer 1

By the analysis I made of your code it is correct, not that it refers to commands and etc., but the link with the css (href) is incorrect. I don't know how you organized your code, so I'm going to use the "default" to make a code correction, but don't worry, I'm going to teach you the reasoning behind the code too.

First, it is considered to create a css folder to store as.css code information and a.index file (for that html folder), and still within the standard it is necessary to create a folder to store the JQuery files (.js) and a last one for the project fonts (.fonts), but they are not necessary to solve your problem.

Then, to link to these other folders, use "." to go back 1 directory, ".." to go back two directories, "..." to go back three directories and so on. To enter a directory use "/" in the same way as the period, ie "//" to enter two directories "///" to return three and so on.

So, no code or link will be made from.index to.css, so it will be necessary to use a period (.) To return to a directory, after using a forward slash (/) to enter the css folder (so we already have ". /nameFolderCss") and last, but not least we have to access the.css file, we use the forward slash (/) again so we have (./nameFolderCss/fileName.css) and that's it, now the link is done correctly, without code it looks like this:

link rel = "stylesheet" type = "text / css" href = "./nameFolderCss/fileName.css"