I am using Bootstrap 4 for my Django project, and my navbar toggle button appears when the screen size is reduced. However, clicking the button does nothing—the menu does not expand or collapse.
Here is my code:(base.html)
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SkyLog - {% block title %}Home{% endblock %}</title>
<link rel="stylesheet" href="/[email protected]/dist/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="icon" type="image/svg+xml" href="{% static 'images/airplane-svgrepo-com.svg' %}">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container">
<a class="navbar-brand" href="#"><b>SkyLog</b></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link mx-3 active" aria-current="page" href="{% url 'home' %}">Home</a>
</li>
<li class="nav-item">
<a class="nav-link mx-3" href="{% url 'login' %}">Login</a>
</li>
<li class="nav-item">
<a class="nav-link mx-3" href="#">LogBook</a>
</li>
<li class="nav-item">
<a class="nav-link mx-3" href="#">Search</a>
</li>
<li class="nav-item">
<a class="nav-link mx-3" href="#">Analytics</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="container mt-4">
{% block content %}
<!-- Page content goes here -->
{% endblock %}
</div>
<script src=".3.1.min.js"
integrity="sha384-fQybjgWLrvvRgtW6jwXnDdRjjvQcTbLrR9fOr5bT8i4QgFO44FtfFZ4lAAey7m70"
crossorigin="anonymous"></script>
<script src=".js/1.14.7/umd/popper.min.js"
integrity="sha384-Uo5Xkna0FgAq06YLyj2hx5Lu5A5xN1W6zVnHJvaApGsXOMA5ol3KSk2EjPmhoUmR"
crossorigin="anonymous"></script>
<script src="/[email protected]/dist/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy5E2fHk1hCwLlG5OWv9F7JqxMk5DQCVRHsENBO"
crossorigin="anonymous"></script>
</body>
</html>
I have included Bootstrap 4.3.1 CSS and JS from a CDN. I used data-toggle="collapse" and data-target="#navbarNav" on the button. The navbar is inside a with navbar navbar-expand-lg navbar-dark bg-dark. I included jQuery, Popper.js, and Bootstrap JS in my before closing . I suspect that jQuery or Bootstrap JS might not be loading correctly, or there could be a conflict in my scripts. What could be causing this issue?