I'm fairly new to Bootstrap and I'm currently working on creating a basic blog within my Django project. It seems that my custom CSS is not functioning properly alongside Bootstrap's, and adding inline styles to each element is proving to be quite tedious. The sequence in which I have loaded the CSS and JS files is as follows:
- Bootstrap CSS
- My own CSS
- JQuery, Popper.js, and Bootstrap.js
Upon inspecting the navigation bar HTML, I noticed that the href attribute wasn't working even with the correct link:
<li class="dropdown-item" href="#"><a>See all</a></li>
So, I attempted to include the href attribute within the anchor tag like this:
<li class="dropdown-item"><a class="nav-link" href="{% url 'blog_index'%}">See all </a></li>
This resulted in the "See all" text turning white and blending into the white background. Altering the nav-link class in the CSS file had no effect either. Here's a snippet of my HTML page:
.nav-link a{
color: black;
}
.navbar .dropdown-toggle, .navbar .dropdown-menu a{
cursor: pointer;
}
// More CSS rules...
What am I overlooking in this scenario?