The argument text-end is not working with bootstrap - html

Good afternoon everyone, I have some issues with Bootstrap. I would like to get two buttons "Log In" and "Sign Up" at the right of the page but they are still at the left while I mention class="text-end" which is supposed to align my buttons to the right. Anyone could have an idea, I am stuck.
<html>
<head>
<meta charset="utf-8">
<title>{% block title %}Newspaper App{% endblock title %}</title>
<meta name="viewport" content="width=device-width,
initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>
<body>
<div class="container">
<header class="p-3 mb-3 border-bottom">
<div class="container">
<div class="d-flex flex-wrap align-items-center justify-content-center
justify-content-lg-start">
<a class="navbar-brand" href="{% url 'home' %}">Newspaper</a>
<ul class="nav col-12 col-lg-auto me-lg-auto mb-2 justify-content-center mb-md-0">
{% if user.is_authenticated %}
<li>+ New</li>
</ul>
<div class="dropdown text-end">
<a href="#" class="d-block link-dark text-decoration-none dropdown-toggle" id="dropdownUser1"
data-bs-toggle="dropdown" aria-expanded="false">
{{ user.username }}
</a>
<ul class="dropdown-menu text-small" aria-labelledby="dropdownUser1">
<li><a class="dropdown-item" href="{% url 'password_change'%}">
Change password</a></li>
<li><a class="dropdown-item" href="{% url 'logout' %}">Log Out</a></li>
</ul>
</div>
{% else %}
<div class="text-end">
<a href="{% url 'login' %}" class="btn btn-outline-primary me-2">Log
In</a>
Sign Up
</div>
{% endif %}
</div>
</div>
</header>
<main>
{% block content %}
{% endblock content %}
</main>
</div>
<!-- Bootstrap JavaScript Bundle -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
crossorigin="anonymous"></script>
</body>
</html>[enter image description here](https://i.stack.imgur.com/19L7D.png)
I read the documentation, tried to reinstall some packages but I don't know what to do anymore.
Thanks in advance, have a nice week.

Related

how can i put 2 links in one tab of bottstrap nav?

I tried to put 2 links in 1 tab but wasn't really successful here i is my navbar code:
<!DOCTYPE html>
<html lang="eng">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Latest compiled JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/js/bootstrap.bundle.min.js"></script>
<title>{% block title %} welcome to music stories{% endblock %}</title>
</style>
</head>
<body>
{% if user.is_authenticated %}
<div class='alert alert-success alert-dismissible fade show'>
<button type= 'btn' class="btn-close" data-bs-dismiss='alert'></button>
<p>{{user.username}}, welcome to music stories world</p>
</div>
{% else %}
<div class="alert alert-danger alert-dismissible fade show">
<button type="btn" class="btn-close" data-bs-dismiss='alert'></button>
Log In
</div>
{% endif %}
Home
<nav class="navbar text-dark bg-warning container-fluid">
<ul class="nav nav-tabs">
{% if user.is_authenticated %}
<li class="nav-item">
<a class='nav-link active' href="#">{{user.username}}</a><br>
<a class="nav-link" href=" {% url 'user:logout' ">Log Out</a>
</li>
{% else %}
<li class="nav-item">
<a class='nav-link active' href="{% url 'login' %}"> Log In</a>
<a class="nav-link" href="{% url 'users:signup'%}">Sign Up</a>
</li>
{% endif %}
`<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-bs-toggle='dropdown' href="tags">tags</a>
<ul class="dropdown-menu">
<li><a class="nav-item" href="#">tag1</a></li>
<li><a class='nav-item' href="#">tag2</a></li>
<li><a class="nav-item" href="#">tag3</a></li>
</ul>
</li>
<li class="nav-item"><a class="nav-link">communication</a></li>
<li class="nav-item">
<a class="nav-link" href="{% url 'pages:musiclist' %}">music list</a>
</li>
<li class="nav-item">
<a class='nav-link' href="{% url 'pages:music_create' %}">add</a>
</li>
</ul>
</nav>
<div>
{% block content %}{% endblock %}
</div>
</body>
</html>
i wanted to put both username and logout both in 1 tab or login and logout ,how can i put 2 link in 1 tab to act like 1 tab?
i had a second question that is not related to topic but can i override .container of <body> in <nav>.

based on what I understood from your explanation is that you can use a DROPDOWN that contains username and logout (check this link).
about overriding the container class, the better solution is to add a class, with a different name like; container-main, in your css file with what you wish to be like and add it to you div.

Bootstrap navbar dropdown not working due to FlexStart css

I know this is a very common issue; however, this one is peculiar. When I use just the regular CSS style sheets (so without style.css), everything works fine, but as soon as I input in main.css, the dropdown stops working. I have no idea which specific part of the CSS is throwing off the dropdown so I am asking for help. I am using Django templates and if I include the style.css on just the home.html page then the dropdown only doesn't work there. I want to try and keep the FlexStart template so I would appreciate the help.
base.html
{% load static i18n %}<!DOCTYPE html>
{% get_current_language as LANGUAGE_CODE %}
{% load bootstrap_icons %}
<html lang="{{ LANGUAGE_CODE }}">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>{% block title %}Semiconnect{% endblock title %}</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Behold My Awesome Project!">
<meta name="author" content="Dilreet Raju">
<link rel="icon" href="{%static 'images/favicons/favicon-32x32.png' %}">
{% block css %}
{% load static %}
<!-- Latest compiled and minified Bootstrap CSS -->
<!-- Latest compiled and minified Bootstrap CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/css/bootstrap.min.css" integrity="sha512-GQGU0fMMi238uA+a/bdWJfpUGKUkBdgfFdgBm72SUQ6BeyWjoY/ton0tEjH+OSH9iP4Dfh+7HM0I9f5eR0L/4w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<!-- Your stuff: Third-party CSS libraries go here -->
<!-- This file stores project-specific CSS -->
<link href="{% static 'css/project.css' %}" rel="stylesheet">
<link href="{% static 'css/carousel.css'%}" rel="stylesheet">
<link href="{% static 'css/style.css'%}" rel="stylesheet">
{% endblock %}
<!-- Le javascript
================================================== -->
{# Placed at the top of the document so pages load faster with defer #}
{% block javascript %}
<!-- Bootstrap JS -->
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/js/bootstrap.min.js" integrity="sha512-OvBgP9A2JBgiRad/mM36mkzXSXaJE9BEIENnVEmeZdITvwT09xnxLtT4twkCa8m/loMbPHsvPl0T8lRGVBwjlQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<!-- Your stuff: Third-party javascript libraries go here -->
<!-- place project specific Javascript in this file -->
<script defer src="{% static 'js/project.js' %}"></script>
{% endblock javascript %}
</head>
<body class="pt-0 pb-0 mb-0">
<header class="pt-0 pb-0">
<nav class="navbar navbar-expand-md navbar-light pl-3 bg-light">
<div class="container-fluid">
<button class="navbar-toggler navbar-toggler-right" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="{% url 'stackbase:home' %}"><h1 id='Titlefont'style='color:#4154F1'>Semi<span class="text-black" id='Titlefont'>Connect</h1></a>
<div class="collapse navbar-collapse justify-content-end" id="navbarSupportedContent">
<ul class="navbar-nav ">
<li class="nav-item active">
<a class="nav-link" href="{% url 'stackbase:home' %}"><h6>Home</h6> <span class="visually-hidden">(current)</span></a>
</li>
</li>
{% if request.user.is_authenticated %}
<li class="nav-item ">
<a class="nav-link" href="{% url 'stackbase:question-create' %}"><h6>Ask A Question</h6></a>
</li>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url 'stackbase:question-lists' %}"><h6>View Questions</h6></a>
</li>
<li class="nav-item">
{# URL provided by django-allauth/account/urls.py #}
<a class="nav-link" href="{% url 'users:detail' request.user.username %}"><h6>{% translate "My Profile" %}</h6></a>
</li>
<li class="nav-item">
{# URL provided by django-allauth/account/urls.py #}
<a class="nav-link" href="{% url 'account_logout' %}"><h6>{% translate "Sign Out" %}</h6></a>
</li>
{% else %}
{% if ACCOUNT_ALLOW_REGISTRATION %}
<li class="nav-item">
{# URL provided by django-allauth/account/urls.py #}
<a id="sign-up-link" class="nav-link" href="{% url 'account_signup' %}"><h6>{% translate "Sign Up" %}</h6></a>
</li>
{% endif %}
<li class="nav-item">
{# URL provided by django-allauth/account/urls.py #}
<a id="log-in-link" class="nav-link" href="{% url 'account_login' %}"><h6>{% translate "Sign In" %}</h6></a>
</li>
{% endif %}
</ul>
</div>
</div>
</nav>
</header>
<div class="container">
{% if messages %}
{% for message in messages %}
<div class="alert alert-dismissible {% if message.tags %}alert-{{ message.tags }}{% endif %}">
{{ message }}
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
{% endfor %}
{% endif %}
</div> <!-- /container -->
{% block content %}
<p>Use this document as a way to quick start any new project.</p>
{% endblock content %}
{% block modal %}{% endblock modal %}
<!-- Footer -->
<!-- Footer -->
{%if not now%}
<footer class="text-center text-lg-start bg-light text-muted">
<!-- Section: Social media -->
<!-- Section: Social media -->
<!-- Section: Links -->
<section class="">
<div class="container text-center text-md-start mt-5 pt-4">
<!-- Grid row -->
<div class="row mt-3">
<!-- Grid column -->
<div class="col-md-3 col-lg-4 col-xl-3 mx-auto mb-4">
<!-- Content -->
<h6 class="text-uppercase fw-bold mb-4">
<i class="fas fa-gem me-3"></i>Semiconnect
</h6>
<p>
Learn the ropes as you ask questions from seniors who are happy to help.
</p>
</div>
<!-- Grid column -->
<!-- Grid column -->
<!-- Grid column -->
<!-- Grid column -->
<div class="col-md-3 col-lg-2 col-xl-2 mx-auto mb-4">
<!-- Links -->
<h6 class="text-uppercase fw-bold mb-4">
Useful links
</h6>
<p>
Back To Top
</p>
<p>
Ask A Question
</p>
<p>
View Questions
</p>
<p>
Sign Up
</p>
<p>
Sign In
</p>
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col-md-4 col-lg-3 col-xl-3 mx-auto mb-md-0 mb-4">
<!-- Links -->
<h6 class="text-uppercase fw-bold mb-4">Contact</h6>
<p><i class="fas fa-home me-3"></i> Surrey, BC, 13153 64 ave</p>
<p>
<i class="fas fa-envelope me-3"></i>
dilreetraju#gmail.com
</p>
<p><i class="fas fa-phone me-3"></i> + 01 778 807 0609</p>
<p><i class="fas fa-print me-3"></i> + 01 604 356 3123</p>
</div>
<!-- Grid column -->
</div>
<!-- Grid row -->
</div>
</section>
<!-- Section: Links -->
<!-- Copyright -->
<div class="text-center p-4" style="background-color: rgba(0, 0, 0, 0.05);">
© 2022 Copyright: Semiconnect
</div>
<!-- Copyright -->
</footer>
{%endif%}
<!-- Footer -->
{% block inline_javascript %}
{% comment %}
Script tags with only code, no src (defer by default). To run
with a "defer" so that you run inline code:
<script>
window.addEventListener('DOMContentLoaded', () => {/* Run whatever you want */});
</script>
{% endcomment %}
{% endblock inline_javascript %}
</body>
</html>
I cannot include the CSS file in the post but here is the paste bin link. https://pastebin.com/G5G0pcM1 I appreciate the support.

NoReverseMatch - Reverse for 'detail' not found. 'detail' is not a valid view function or pattern name

I want to see http://127.0.0.1:8000/bookmark/ page.
But I go there, there is an error in website.
error message is
NoReverseMatch at /bookmark/
Reverse for 'detail' not found. 'detail' is not a valid view function or pattern name.
Request Method: GET
Request URL: http://127.0.0.1:8000/bookmark/
Django Version: 3.1
Exception Type: NoReverseMatch
Exception Value:
Reverse for 'detail' not found. 'detail' is not a valid view function or pattern name.3
and my code is
[base.html]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{% block title %}django web programming {% endblock %}</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<!-- 하위 html 파일에서 이 부분에 style 태그를 추가할 가능성이 있으므로 block 태그를 기입. 블록태그이름은 extra-style로 지정함 변경가능 -->
{% block extra-style %}{% endblock %}
<style>
.nav-link{
font-size: 18px;
font-weight: 500;
}
</style>
</head>
<body style = "padding-top:90px;">
<!-- home.html (4) 참고 -->
<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
<span class="navbar-brand mx-5 mb-0 font-weight-bold font-italic"> Motdongsan</span>
<!-- <a class="navbar-brand" href="#">Navbar</a> -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item mx-3 btn btn-light">
<a class="nav-link" href="{% url 'home'%}">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item mx-3 btn btn-light">
<a class="nav-link" href="{% url 'bookmark:index'%}">Bookmark</a>
</li>
<li class="nav-item mx-3 btn btn-light">
<a class="nav-link" href="{% url 'blog:index'%}">blog</a>
</li>
<li class="nav-item mx-3 btn btn-light">
<a class="nav-link" href="{% url 'bookmark:index'%}">photo</a>
</li>
<li class="nav-item mx-3 btn btn-light">
<a class="nav-link" href="">Photo</a>
</li>
<li class="nav-item dropdown mx-3 btn btn-light">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Admin</a>
<a class="dropdown-item" href="#">Archive</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Search</a>
</div>
</li>
<li class="nav-item mx-3 btn ">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
<form class ="form-inline my-2" action="" method="post"> {% csrf_token %}
<input class="form-control mr-sm-2" type="search" placeholder="global search" name="search_word">
</form>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<!-- 본문 내용은 각 페이지마다 달라질수 있으므로 block 태그를 사용. 블록태그이름은 content -->
<div class="container bg-warning">
{% block content %}{% endblock %}
</div>
{% block footer %}{% endblock %}
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
<script src="https://kit.fontawesome.com/c998a172fe.js"></script>
{% block extra-script %}{% endblock %}
</body>
</html>
[bookmark_detail.html]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Django Bookmark Detail</title>
</head>
<body>
<div id ="content">
<h1>{{object.title}}</h1>
<ul>
<li>URL: {{object.url}}</li>
</ul>
</div>
</body>
</html>
[bookmark/views.py]
from django.shortcuts import render
# Create your views here.
from django.views.generic import ListView, DetailView
from bookmark.models import Bookmark
class BookmarkLV(ListView):
model = Bookmark
class BookmarkDV(DetailView):
model = Bookmark
[boorkmark/urls.py]
from django.urls import path
from bookmark.views import BookmarkLV, BookmarkDV
app_name= 'bookmark'
urlpatterns = [
path('', BookmarkLV.as_view(), name='index'),
path('<int:pk>/', BookmarkDV.as_view(), name='detail'),
]
what should I do? please help me...
and I don't know why I just want to go bookmark site, but error code says base.html has a problem
I just move on link(http://127.0.0.1:8000/bookmark/ page.), not button in base.html
+)
this is bookmark/models.py
from django.db import models
# Create your models here.
class Bookmark(models.Model):
title = models.CharField('TITLE', max_length =100, blank =True)
url = models.URLField('URL', unique=True)
# URL : admin사이트에서 보일것
def __str__(self):
return "%s %s" %(self.title, self.url)
# return self.title
this is bookmark_list.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
{% extends "base.html"%}
{% block title %}bookmark_list.html{% endblock %}
{% block content %}
</head>
<body>
<div id="content">
<h1> Bookmark List</h1>
<ul>
{%for bookmark in object_list%}
<li>{{bookmark}}</li>
{%endfor%}
</ul>
{% endblock %}
</div>
</body>
</html>

I think your problem is the way that you defined your url in your bookmark_list.html (the line <li>{{bookmark}}</li>). It's because you defined app_name in your urls and in this way you should change your template line to something like <li>{{bookmark}}</li>.

Django Bootstrap Dropdown Menu not working

Building my first Django app from a tutorial, following the instructions pretty much verbatim but my navbar dropdown menu is not working no matter what I try, so unable to log out or change password from the navbar.
I am very new to js, but some things I have tried:
Experimenting w different browsers (doesn't work for Safari or Chrome)
Have looked at similar questions and implemented those techniques but it's still not working (linking to js in the head, making sure to link to js/popper/bootstrap in the correct order, etc.):
django bootstrap dropdown not working
Have also attempted to create static folders in pages/static/js and pages/static/css but that looks like it may be for more advanced styling than what we're going for here.
Bootstrap template not working correctly Django
Template file/directory below. Issue is between lines 55 and 68 (div class="collapse navbar-collapse")
Thanks in advance for the help.
<!-- templates/base.html -->
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/\ 1.14.3/
umd/popper.min.js"
integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAKl8WvCWPIPm49"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/\ js/bootstrap.min.js"
integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ\ 6OW/JmZQ5stwEULTy"
crossorigin="anonymous"></script>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin="anonymous">
<!-- <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script> -->
<title>{% block title %}Newspaper App{% endblock title %}</title>
</head>
<body>
<nav class="navbar navbar-expand-md navbar-dark bg-dark mb-4">
<a class="navbar-brand" href="{% url 'home' %}">Newspaper</a>
{% if user.is_authenticated %}
<ul class="navbar-nav mr-auto">
<li class="nav-item">+ New</li>
</ul>
{% endif %}
<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">
{% if user.is_authenticated %}
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link dropdown-toggle" href="#" id="userMenu"
data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false">
{{ user.username }}
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="userMenu">
<a class="dropdown-item" href="{% url 'password_change'%}">Change password</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="{% url 'logout' %}"> Log Out</a>
</div>
</li>
</ul>
{% else %}
<form class="form-inline ml-auto">
<a href="{% url 'login' %}" class="btn btn-outline-secondary">
Log In</a>
<a href="{% url 'signup' %}" class="btn btn-primary ml-2">
Sign up</a>
</form>
{% endif %}
</div>
</nav>
<div class="container">
{% block content %}
{% endblock content %}
</div>
</body>
</html>

I copied your code and had the same problem but after swapping the bootstrap.js script for a different one it started working.
The problem was a backslash in the bootstraps js URL.
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/\ js/bootstrap.min.js"
integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ\ 6OW/JmZQ5stwEULTy"
crossorigin="anonymous"></script>
After https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/ there is \ js/bootstrap.min.js
but it should be https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js
So when we switched to the newest js it fixed the problem but that js is still valid if you fix the path.
https://getbootstrap.com/docs/4.4/getting-started/introduction/

How do you toggle multiple data targets and toggles using bootstrap html data toggle

I am writing code for a animated hamburger icon for the bootstrap navbar, but need to toggle both the hamburger icon and the bootstrap repsonsive navbar. So is there some code or some way to toggle both pieces of data at different ids. Also, I can't use javascript because the bootstrap navbar doesn't have the sliding animation when toggling it through javascript.
Here is the code I have already for targeting the navbar collapse feature.
{% load staticfiles %}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link href="\static\base\css\hamburgers.css" rel="stylesheet">
<link href="\static\base\css\navbar.css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-expand-md bg-dark navbar-dark">
<button class="hamburger hamburger--squeeze" height="15" id="hamburger" data-target="#collapsibleNavbar" data-toggle="collapse">
<span class="hamburger-box">
<span class="hamburger-inner"></span>
</span>
</button>
<a class=" navfont navbar-brand mx-auto" href="/account">Gucci Enterprises</a>
<div class="navshow">
{% if user.is_authenticated %}
Logout
{% else %}
<a href="/account/login" class="navfont important" >Login</a>
{% endif %}
</div>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<div class="container">
<div style="text-align: center">
{% if user.is_authenticated %}
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link navfont" href="/account/profile">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link navfont" href="/account/profile/edit">Edit Profile</a>
</li>
<li class="nav-item">
<a class="nav-link navfont" href="/account/change-password">Change Password</a>
</li>
</ul>
{% else %}
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link navfont" href="/account/register">Register</a>
</li>
<li class="nav-item">
<a class="nav-link navfont" href="/account/reset-password">Reset Password</a>
</li>
</ul>
{% endif %}
</div>
</div>
</div>
<div class="navhide">
{% if user.is_authenticated %}
Logout
{% else %}
Login
{% endif %}
</div>
</nav>
<br>
{% block body %}
{% endblock %}
</body>
</html>
'''

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<button class="btn btn-primary" data-toggle="collapse" data-target=".it-works">It Works</button>
<div class="collapse it-works">Yep.</div>
<div class="collapse it-works">It works.</div>
Add a class like .multi-collapse on the elements that should toggle and use data-target=".multi-collapse" with a class instead of an id. The bootstrap collapse component multiple targets documentation says you can reference them using a JQuery selector and includes a working example.