I'm new to Django. I'm having problem including a sub-template in a main template. The directory structure of my project is attached in the snapshot. I removed the default views.py and created my own folder named "views" and put my views in it. Here is what I've done:
1. app/views/__init__.py
from .home import *
2. app/views/home.py
from django.shortcuts import render
def index(request):
return render(request, 'home.html')
3. app/templates/home.html
{% load staticfiles %}
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>
Administrator Section
</title>
<link type="text/css" rel="stylesheet" href="{% static "css/common.css" %}"/>
<link type="text/css" rel="stylesheet" href="{% static "css/theme/transdmin.css" %}"/>
<link type="text/css" rel="stylesheet" href="{% static "css/login.css" %}"/>
<script type="text/javascript" src="{% static "js/jquery-1.10.2.js" %}"></script>
<script type="text/javascript" src="{% static "js/common.js" %}"></script>
<script type="text/javascript" src="{% static "js/login.js" %}"></script>
</head>
<body>
<div>
<div id="wrapper" class="ys-adminform">
{% include "includes.header_logo.html" %}
<form id="form-login" class="admin-section-form frm">
<div class="header">
<br/>
<h1>Login</h1>
<br/>
</div>
<div class="content">
<div class="form-row">
<input name="email" class="input" placeholder="Email" type="text"/>
<div class="user-icon"></div>
</div>
<div class="form-row">
<input name="password" class="input password" placeholder="Password" type="password"/>
<div class="pass-icon"></div>
</div>
</div>
<div class="footerlogin">
<input class="button" name="btn-login" value="Authenticate" type="button"/>
<div class="message" style="font-weight: bold; padding-top:16px;"> </div>
</div>
</form>
</div>
</div>
{% include "includes.footer.html" %}
</body>
</html>
The problem is include is not adding content from the sub-views.
I understand it could be a path problem but I tried various options like:
{% include "includes.header_logo.html" %}
{% include includes.header_logo.html %}
{% include "includes/header_logo.html" %}
{% include "templates.includes.header_logo.html" %}
{% include "app.templates.includes.header_logo.html" %}
etc.
You have to use directory slashes (/), not dots (.)
For example:
{% include "includes.footer.html" %}
becomes this:
{% include "includes/footer.html" %}
As suggested by Leistungsabfall, "includes/footer.html" works. The header was not working because it had:
This line must be crashing and because of which header was not working.
Simply add template folder with slash .... like
{% include "blog/footer.html" %}
Related
*I am having trouble in my index.html file. {% extends 'base.html' %} works. But everything b/w
{% block content %}{% endblock content %} doesn't execute. Here are my files.
views.py:-*
from django.shortcuts import render
def index(request):
return render(request, 'main/index.html')
base.html:-
<!doctype html>
{%load static %}
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js"
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
crossorigin="anonymous"></script>
<title>To Do App</title>
</head>
<body>
<div>
<nav class=" navbar fixed-top navbar-dark bg-dark">
<a class="navbar-brand" href="/">To Do App</a>
</nav>
<div class="container">
{% block content %}
{% endblock content %}
</div>
</div>
</body>
</html>
index.html:-
{% extends 'base.html'%}
{% block content %}
<div class="row">
<div class="col">
<h2>Add Item</h2>
</div>
</div>
{% endblock content %}
All it shows is a navbar of dark color saying To Do App
I also tried adding advanced things like form but it didn't work so then i added this heading saying Add Item. And guess what it doesn't work
When I inspect elements in browser I can see your Heading "Add Item". The only problem was that the whole <div class="container">...</div> was hidden behind nav bar. And the reason was CSS.
Adding something like margin-top: 56px to .container may solve the problem.
Based on documentation you must use only 'endblock' tag when you are closing tag.So you must replace {% endblock content %} with {% endblock %}.
I cannot find what is wrong with my Flask app. I keep getting werkzeug.routing.BuildError: Could not build URL for endpoint 'mark_report'.
Here is /index
<!DOCTYPE html>
<html> <head>
<title>Title</title>
<link rel="stylesheet" href="../static/css/style.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<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.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script type="text/javascript" src="{{ url_for('static', filename='js/scripts.js') }}"></script>
<link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}"> </head> <body>
{% block content %}
{% endblock %} </body> </html>
Here is our main page
{% extends "index.html" %} {% block content %} <div class="container"> <div class="spacer">
</div> <div class="row header-row">
<h1>EMS Suite</h1> </div> <div class="row">
<div class="col-md-5">
<ul class="list-group">
<li class="list-group-item li-custom"><h3>Mark Report</h3></li> </ul>
</div>
<div class="col-md-7">
{% block page_content %}
{% endblock %}
</div> </div> <nav class="navbar navbar-default navbar-fixed-bottom footer">
<div class="container-fluid">
</div> </nav> </div> {% endblock %}
Here is the route, there is an HTML page named mark_report.html in our template folders.
#app.route('/mark_report')
def mark_report():
return render_template('mark_report.html')
I made the mistake of having the below if statement above my routes.... Thank you everyone
if __name__ == "__main__":
app.run(host='0.0.0.0', port=8080)
I am trying to load static files in a django project. I make a system of registration, login and password change. In the case when I go to the pages of my project, static files are loaded. However, if I reset my password and later go to the password change page (http://127.0.0.1:8000/password_reset_confirm/MQ-set-password/) django does not load static files.
I am using django 2.2.6, python 3.7.3.
Project structure
-project
-core
models.py
forms.py
views.py
...
-settings
settings.py
urls.py
...
-static
...
-templates
...
manage.py
...
urls.py
from django.contrib import admin
from django.urls import path, include
from django.contrib.auth.views import PasswordResetView, PasswordResetCompleteView, PasswordResetConfirmView
from django.conf.urls import url
from core import views
urlpatterns = [
path('', views.home, name='home'),
path('signup/', views.signup, name='signup'),
path('login/', views.LoginView.as_view(), name="login"),
path('password_change_form/', views.LoginView.as_view(), name='password_change_form'),
path('password_change_confirm/', views.LoginView.as_view(), name='password_change_confirm'),
path('password_reset/', PasswordResetView.as_view(), name='password_reset'),
url(r'password_reset_confirm/(?P<uidb64>[0-9A-Za-z]+)-(?P<token>.+)/$', PasswordResetConfirmView.as_view(), name='password_reset_confirm'),
path('password_reset_done/', PasswordResetCompleteView.as_view(), name='password_reset_done'),
path('secret/', views.secret_page, name='secret'),
path('admin/', admin.site.urls)
]
password_reset_confirm
{% extends 'base.html' %}
{% block content %}
<h2>Set new password</h2>
{% if validlink %}
<form method="post">
{% csrf_token %}
{{ form.as_p }}
<button type="submit">Save</button>
</form>
{% else %}
<p style="color:red;">Invalid token.</p>
<p>
Request a new password reset token
</p>
{% endif %}
{% endblock %}
base.html
<!DOCTYPE html>
<html lang="en">
{% load static %}
<head>
<!-- Metas -->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Django Fishing</title>
<meta name="description" content="GRAPE – Multipurpose App Landing HTML Template is a modern, unique and clean design for your Business Purpose. Users will love Your site because it gives them a unique user experience.">
<!-- External CSS -->
<link rel="stylesheet" href="../static/core/assets/css/bootstrap.min.css">
<link rel="stylesheet" href="../static/core/assets/css/font-awesome.min.css">
<link rel="stylesheet" href="../static/core/assets/css/et-line.css">
<link rel="stylesheet" href="../static/core/assets/css/magnific-popup.css">
<link rel="stylesheet" href="../static/core/assets/css/animate.css">
<link rel="stylesheet" href="../static/core/assets/css/owl.carousel.css">
<link rel="stylesheet" href="../static/core/assets/css/owl.transitions.css">
<link rel="stylesheet" href="../static/core/assets/css/plyr.css">
<!-- Custom CSS -->
<link rel="stylesheet" href="../static/core/css/style.css">
<link rel="stylesheet" href="../static/core/css/responsive.css">
<!-- Google font -->
<link href="https://fonts.googleapis.com/css?family=Poppins:300,400%7CUbuntu:400,700%7COpen+Sans" rel="stylesheet">
<!-- Favicon -->
<link rel="icon" href="../static/core/images/favicon.png">
<link rel="apple-touch-icon" href="../static/core/images/apple-touch-icon.png">
<link rel="apple-touch-icon" sizes="72x72" href="../static/core/images/icon-72x72.png">
<link rel="apple-touch-icon" sizes="114x114" href="../static/core/images/icon-114x114.png">
<!--[if lt IE 9]>
<script src="../static/core/assets/js/html5shiv.min.js"></script>
<script src="../static/core/assets/js/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="loader-wrap" id="loader-wrap">
<div class="cssload-loader"></div>
</div>
<!-- Preloader End -->
<!-- Navigation -->
<nav class="navbar navbar-default" data-spy="affix" data-offset-top="60">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="{% url 'home' %}">
<img src="../static/core/images/50h/logo.png" alt="Site Logo">
</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="navbar-collapse">
<ul class="nav navbar-nav navbar-right" id="one-page-nav">
<li>Главная</li>
<li>Возможности</li>
<li>Почему мы</li>
<li>Форум</li>
<li>Цены</li>
<li>Поддержка</li>
<li>Скачать</li>
<li>Контакты</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<div id="banner" class="banner">
<div class="banner-item banner-1 steller-parallax" data-stellar-background-ratio="0.5">
</div>
</div>
{% block content %}{% endblock content %}
<footer>
<!-- Footer Subscribe -->
<div class="subscription-area section-padding theme-bg">
<div class="container">
<div class="row">
<div class="col-md-6">
<h3 class="wow fadeInLeft" data-wow-duration="1.5s">Подпишитесь на нашу<br/>новостную ленту</h3>
</div>
<div class="col-md-6">
<form class="subscription wow fadeInRight" data-wow-duration="1.5s" action="#" method="post">
<input type="email" name="email" placeholder="Введите вашу почту здесь" required>
<button type="submit">Подтвердить</button>
<p class="newsletter-success"></p>
<p class="newsletter-error"></p>
</form>
</div>
</div>
</div>
</div>
<!-- Footer Subscribe -->
<!-- Footer logo and social media button -->
<div class="logo-social-area section-padding">
<div class="container text-center">
<a class="logo logo-footer wow fadeInDown" data-wow-duration="1.5s" href="#">
<img src="../static/core/images/50h/logo.png" alt="Site Logo">
</a>
<div class="socials wow fadeInUp" data-wow-duration="1.5s">
<i class="fa fa-facebook"></i>
<i class="fa fa-twitter"></i>
<i class="fa fa-google-plus"></i>
<i class="fa fa-youtube-play"></i>
<i class="fa fa-vimeo"></i>
</div>
</div>
</div>
<!-- Footer logo and social media button -->
<!-- Footer copyrgiht and navigation -->
<div class="copyright-footer">
<div class="container">
<div class="row">
<div class="col-md-6 col-xs-12">
<p class="copyright"># Copyright 2019, django fishing. All Right Reserved</p>
</div>
<div class="col-md-6 col-xs-12">
<ul class="footer-nav">
<li>Правовая информация</li>
<li>Наша команда</li>
<li>Блог</li>
<li>FAQ</li>
</ul>
</div>
</div>
</div>
</div>
<!-- Footer copyrgiht and navigation -->
</footer>
<script src="../static/core/assets/js/jquery.min.js"></script>
<script src="../static/core/assets/js/bootstrap.min.js"></script>
<script src="../static/core/assets/js/jquery.nav.js"></script>
<script src="../static/core/assets/js/wow.min.js"></script>
<script src="../static/core/assets/js/jquery.localScroll.min.js"></script>
<script src="../static/core/assets/js/jquery.magnific-popup.min.js"></script>
<script src="../static/core/assets/js/owl.carousel.js"></script>
<script src="../static/core/assets/js/plyr.js"></script>
<script src="../static/core/assets/js/jquery.ajaxchimp.min.js"></script>
<script src="../static/core/assets/js/jquery.stellar.min.js"></script>
<script src="../static/core/js/map.js"></script>
<script src="../static/core/js/custom.js"></script>
</body>
</html>
Don't use explicit relative paths, use the {% static ...%} template tag. E.g. replace this:
<script src="../static/core/assets/js/jquery.min.js"></script>
with this:
<script src="{% static 'core/assets/js/jquery.min.js' %}"></script>
I'm quite new to Django...
So, I have a model. Notice the two foreign key fields (DeviceProfile model actually has data, but MISMStateSnapshot does not):
class MISMWorkflow(models.Model):
createdAt = models.DateTimeField(default=timezone.now)
currentSnapshot = models.ForeignKey('MISMStateSnapshot', null=True, blank=True, on_delete=models.SET_NULL)
device = models.ForeignKey(DeviceProfile, null=True, blank=True, on_delete=models.SET_NULL, related_name='workflows')
def get_absolute_url(self):
return reverse('{}:workflow_detail'.format(VIEW_NAMESPACE), args=(self.pk,))
And a CreateView:
class WorkflowCreateView(generic.CreateView):
model = MISMWorkflow
fields = '__all__'
template_name = 'mism_web/workflow_create_form.html'
def form_valid(self, form):
form.instance.device = DeviceProfile.objects.get(pk=self.kwargs.get('device_id'))
form.instance.createdAt = timezone.now()
return super(WorkflowCreateView, self).form_valid(form)
And the template:
{% extends 'mism_web/base.html' %}
{% load material_form %}
{% block content %}
<form action="" method="POST">{% csrf_token %}
<!--{{ form.as_p }}-->
{% form form=form %}{% endform %}
<input type="submit" name="_submit" class="btn" value="Save" />
</form>
{% endblock %}
urls:
url(r'^workflow/workflow_create/$', workflow.WorkflowCreateView.as_view(), name='workflow_create_new'),
This is what I see when I go to create page:
There are couple of things wrong with this:
I don't see the calendar/clock widget for the DateTimeField (createdAt) that I expected to see here.
There's no selection input for either currentSnapshot or device fields (Even though there are devices in the DB)
This is not because I am using the django-material plugin. I tested without it and I still get the same "empty" form.
What's the cause of this and how to fix?
EDIT:
This is what I see in the admin panel for `MISMWorkflow', this is exactly the sort of form I expect to see (ofc, I don't want to create foreign key entities from here, just to list them down):
EDIT: The problem seems to happen only when I extend the base template. If I don't use it, I can see the fields properly. For example, template will be like so:
<html>
<body>
<form action="" method="POST">{% csrf_token %}
{{ form.as_p }}
<input type="submit" name="_submit" class="btn" value="Save" />
</form>
<body>
<html>
And I can see the dropdowns now:
Here is my base.html:
{% load static %}
{% load compress %}
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link type="text/css" rel="stylesheet" href="{% static 'mism_web/css/materialize.min.css' %}" media="screen,projection"/>
<link type="text/css" rel="stylesheet" href="{% static 'mism_web/css/helper.css' %}" media="screen,projection"/>
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<!-- TODO: Fix navbar links -->
<body>
<div>
<nav>
<div class="nav-wrapper">
MISM
<a href="#" data-activates="mobile" class="button-collapse">
<i class="material-icons">menu</i>
</a>
<ul class="right hide-on-med-and-down">
<li>
<a href="{% url 'mism_web:index' %}">
<i class="material-icons left">home</i>
Home
</a>
</li>
<li>
<a href="{% url 'mism_web:device_list' %}">
<i class="material-icons left">perm_device_information</i>
Devices
</a>
</li>
<li>
<a href="{% url 'mism_web:workflow_list' %}">
<i class="material-icons left">format_indent_increase</i>
Workflows
</a>
</li>
<li>
{% if user.is_authenticated %}
{{ user.get_username }}
{% else %}
Unknown user
{% endif %}
</li>
</ul>
<ul class="side-nav" id="mobile">
<li>
<a href="{% url 'mism_web:device_list' %}">
<i class="material-icons top">home</i>
Home
</a>
</li>
<li>
<a href="{% url 'mism_web:device_list' %}">
<i class="material-icons top">perm_device_information</i>
Devices
</a>
</li>
<li>
<a href="{% url 'mism_web:workflow_list' %}">
<i class="material-icons top">format_indent_increase</i>
Workflows
</a>
</li>
<li>
{% if user.is_authenticated %}
{{ user.get_username }}
{% else %}
Unknown user
{% endif %}
</li>
</ul>
</div>
</nav>
</div>
<div class="container">
{% block content %} {% endblock %}
</div>
<script type="text/javascript" src="{% static 'mism_web/js/jquery-3.2.1.min.js' %}"></script>
<script type="text/javascript" src="{% static 'mism_web/js/materialize.min.js' %}"></script>
<script type="text/javascript" src="{% static 'mism_web/js/helper.js' %}"></script>
</body>
</html>
So, it's the base.html interfering with the form display in some way. I have no idea how.
From what I understood. It seems you havent initialized the select in materialize.
Try adding a script tag in the html file with the form with the following contents:
$(document).ready(function() {
$('select').material_select();
});
You may need to initialize the datepicker plugin too to display the datepicker calendar.
More about this can be found here:
http://materializecss.com/forms.html
I'm working on this Django project. The functionality works perfectly fine. When I started working on the front-end using Bootstrap3, I ran into some issues (more like confusions).
First, I installed django-bootstrap3 using command prompt like so:
pip install django-bootstrap3
The installation was successful. Bootstrap3 was downloaded into this location in my computer c:\python34\lib\site-packages Then, I included it as a third-party app in settings.py in the list of INSTALLED_APPS in my main project directory like so:
INSTALLED_APPS =(
--apps--
'bootstrap3',
)
Also in settings.py, I included jQuery like so:
BOOTSTRAP3 = {'include_jquery': True}
I modified my base.html to include the bootstrap elements. I have two apps, users and mynotess (sorry for bad naming)
base.html
EDIT: base.html is at the bottom of question.
For some reason, I loaded up localhost:8000 and it was still in the normal ugly HTML form. I checked online, and I found some CDN links and thought maybe if I just used the CDN links, it would work.
I then included this in base.html, copied right from Bootstrap's website.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
(I included the links in the head section and the scripts in the body section of the HTML document).
It worked! However, when I removed the bootstrap3 from my INSTALLED_APPS and all the code that loads up bootstrap3 that was installed on my computer (such as {% load bootstrap3 %}, it didn't work. It went back to the ugly HTML format. Similarly, when I removed the CDN links and kept all the bootstrap3 code that loaded bootstrap installed on my computer, it went back to the ugly HTML format as well.
My question is:
Is it supposed to be like this? According to a book that I'm currently following for this project, I don't even have to include the CDN links and scripts (the book doesn't mention them at all) and it ought to work.
If it's not supposed to be like this, is there something wrong with my code that's causing this? Am I missing some step? Are my bootstrap3 files in the correct directory? (i just downloaded it using pip through command prompt and I didn't move it anywhere else)
The functionality of my Django website works just fine.
Any help, explanations, or suggestions are greatly appreciated!
EDIT:
base.html would have to be like this if I wanted the Bootstrap elements to show up.
<!DOCTYPE html>
{% load bootstrap3 %}
<html lang="en">
<head>
<meta charset="utf-8"><!-- encoding characters -->
<meta http-equiv="X-UA-Compatible" content="IE=edge"><!-- some Microsoft Edge/IE stuff -->
<meta name="viewport" content="width=device-width, initial-scale=1"><!-- viewport -> the user's visible area of a webpage, -> this sets it to normal zoom (scale 1) and width of device -->
<title>My Notes</title
{% bootstrap_css %}
{% bootstrap_javascript %}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
</head>
<body>
<!-- Static top navbar -->
<nav class="navbar navbar-default navbar-static-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
data target="#navbar" aria-expanded="false"
aria-controls="navbar"></button>
<a class="navbar-brand" href="{% url 'mynotess:index' %}">My Notes</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
{% if user.is_authenticated %}
<li>My Topics</li>
{% endif %}
</ul>
<ul class="nav navbar-nav navbar-right">
{% if user.is_authenticated %}
<li><a>{{user.username}}</a></li>
<li>Log Out</li>
{% else %}
<li>Login</li>
<li>Create Account</li>
{% endif %}
</ul>
</div>
</div>
</nav>
<div class="container">
<div class="page-header">
{% block header %}{% endblock header %}
</div>
<div>
{% block content %}{% endblock content %}
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>
If I removed just the CDN links, it wouldn't work. Similarly, if I removed just the template tags, it wouldn't work either.
base.html without template tags (doesn't work)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"><!-- encoding characters -->
<meta http-equiv="X-UA-Compatible" content="IE=edge"><!-- some Microsoft Edge/IE stuff -->
<meta name="viewport" content="width=device-width, initial-scale=1"><!-- viewport -> the user's visible area of a webpage, -> this sets it to normal zoom (scale 1) and width of device -->
<title>My Notes</title
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
</head>
<body>
<!-- Static top navbar -->
<nav class="navbar navbar-default navbar-static-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
data target="#navbar" aria-expanded="false"
aria-controls="navbar"></button>
<a class="navbar-brand" href="{% url 'mynotess:index' %}">My Notes</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
{% if user.is_authenticated %}
<li>My Topics</li>
{% endif %}
</ul>
<ul class="nav navbar-nav navbar-right">
{% if user.is_authenticated %}
<li><a>{{user.username}}</a></li>
<li>Log Out</li>
{% else %}
<li>Login</li>
<li>Create Account</li>
{% endif %}
</ul>
</div>
</div>
</nav>
<div class="container">
<div class="page-header">
{% block header %}{% endblock header %}
</div>
<div>
{% block content %}{% endblock content %}
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>
base.html without the links for CDN (also doesn't work)
{% load bootstrap3 %}
<html lang="en">
<head>
<meta charset="utf-8"><!-- encoding characters -->
<meta http-equiv="X-UA-Compatible" content="IE=edge"><!-- some Microsoft Edge/IE stuff -->
<meta name="viewport" content="width=device-width, initial-scale=1"><!-- viewport -> the user's visible area of a webpage, -> this sets it to normal zoom (scale 1) and width of device -->
<title>My Notes</title
{% bootstrap_css %}
{% bootstrap_javascript %}
</head>
<body>
<!-- Static top navbar -->
<nav class="navbar navbar-default navbar-static-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
data target="#navbar" aria-expanded="false"
aria-controls="navbar"></button>
<a class="navbar-brand" href="{% url 'mynotess:index' %}">My Notes</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
{% if user.is_authenticated %}
<li>My Topics</li>
{% endif %}
</ul>
<ul class="nav navbar-nav navbar-right">
{% if user.is_authenticated %}
<li><a>{{user.username}}</a></li>
<li>Log Out</li>
{% else %}
<li>Login</li>
<li>Create Account</li>
{% endif %}
</ul>
</div>
</div>
</nav>
<div class="container">
<div class="page-header">
{% block header %}{% endblock header %}
</div>
<div>
{% block content %}{% endblock content %}
</div>
</div>
</body>
</html>
I had the same issue, and we both made the same typo: you forgot ">" in your closing title tag
Besides the usual typo stuff (title tags etc.), you already defined to import bootstrap, but the jquery line doesn't get loaded until you actually stick the jquery into the parameter to utilise it. (I just realised this is quite old as the new one is already on Bootstrap 4).
You don't need to manually include any cdn links, your django bootstrap tags can handle that part of it for you unless you decide to change the links (in which case you'd write your change to the settings in the settings.py (assuming that's what you're using).
So...
Including the bootstrap CSS is this tag:
{% bootstrap_css %}
And for including the bootstrap javascript and jquery js files - instead of:
{% bootstrap_javascript %}
try using:
{% bootstrap_javascript jquery=True %}
or:
{% bootstrap_javascript jquery %}
if you have already defined jquery as True in your config
It sounds like {% boostrap_css %} is not pulling down the CSS. That would cause the issue you have described. You may want to update the settings so they are pulling from a CDN that you know works or just hard code them into your base template.
template.html
<!DOCTYPE html>
{# Load the tag library #}
{% load bootstrap3 %}
<html lang="en">
<head>
<meta charset="utf-8"><!-- encoding characters -->
<meta http-equiv="X-UA-Compatible" content="IE=edge"><!-- some Microsoft Edge/IE stuff -->
<meta name="viewport" content="width=device-width, initial-scale=1"><!-- viewport -> the user's visible area of a webpage, -> this sets it to normal zoom (scale 1) and width of device -->
<title>My Notes</title
{# Load CSS and JavaScript #}
{% bootstrap_css %}
{% bootstrap_javascript %}
</head>
<body>
{# Display a form #}
<form action="/url/to/submit/" method="post" class="form">
{% csrf_token %}
{% bootstrap_form my_form_here %}
{% buttons %}
<button type="submit" class="btn btn-primary">
{% bootstrap_icon "star" %} Submit
</button>
{% endbuttons %}
</form>
</body>
</html>
settings.py
BOOTSTRAP3 = {
'jquery_url': '//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'
'base_url': '//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/'
}
It sounds like the Django for beginners book. If so be careful to check the folders in which you have placed your html files. I have fallen into this trap myself with this book. It isn't always clear in which directory they are creating new files.
In my case, I only noticed this when my bootstrap wouldn't work on my /admin & change_password pages, but it was working fine for 'home'.
Did you add the configurations in settings.py file?
Please see this link
https://django-bootstrap3.readthedocs.io/en/latest/settings.html