Django, html, css - Footer style applies to all the body - python

I have a webpage structured as follows and I want to have a background-color: #aa2222 property to apply only to the footer.
<body>
{% block sidebar %}<!-- insert default navigation text for every page -->{% endblock %}
{% block content %}<!-- default content text (typically empty) -->
<!-- Navigation Bar -->
<section class="navbarSection">
<div class="topnav" id="myTopnav">
...
</div>
</section>
<!-- End of Navigation Bar -->
<!-- Articles -->
<section class="articleSection">
<div class="articles" id="myArticles">
{% for article in articles %}
...
{% endfor %}
</div>
</section>
<!-- Footer -->
<footer id="site-footer">
<div id="footer1">
<p> footer text </p>
</div>
</footer>
<!-- End of Footer -->
</body>
The footer is styled as follows:
#footer1 {
background-color: #aa2222;
}
At the moment the page is displayed with all the body with background-color:#aa2222 instead of only the footer.
It seems to be related to Django because using the code in a web editor it applies the background color properly only to the footer.
Could you please help?
EDIT1: as suggested, I tried to add a footer.html file in the templates folder as follows
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!-- Footer -->
<footer id="site-footer">
<div id="footer1">
<p> footer text </p>
</div>
</footer>
<!-- End of Footer -->
</body>
</html>
Then I have added the tag {% include "templates/footer.html" %} in the index.html but I receive the error TemplateDoesNotExist at /home/ when running python manage.py runserver


try defining the footer section in a separate footer.html page and use the include template tag to include the html page.


Solved recoding all the website using bootstrap for responsive design and inserting the footer in the index.html.
Extract of HTML below:
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="{% static 'css/styles.css' %}">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
{% block sidebar %}<!-- insert default navigation text for every page -->{% endblock %}
{% block content %}<!-- default content text (typically empty) -->
<!-- Main Logo -->
<div class="main-image" id="myMainImage">
<img src="{{STATIC_URL}}/static/images/logo.png"/>
</div>
<!-- Navigation Bar -->
<nav class="navbar navbar-inverse">
...
</nav>
<!-- End of Navigation Bar -->
<!-- Articles -->
<div class="articles" id="myArticles">
{% for article in articles %}
<h3>Titolo: {{ article.title }}</h3>
<p><strong>Autori:</strong> {{ article.authors }}</p>
<p><strong>Riepilogo:</strong> {{ article.summary }}</p>
<p><strong>Testo:</strong> {{ article.content }}</p>
{% endfor %}
</div>
<!-- End of Articles -->
<!-- Footer -->
<footer class="site-footer">
<div id="footer1">
<p> Text </p>
</div>
</footer>
<!-- End of Footer -->
{% endblock %}
</body>
</html>
And the CSS:
.site-footer {
padding-left: 40px;
padding-right: 40px;
padding-top: 15px;
padding-bottom: 10px;
background-color: #aa2222;
color: white;
font-style: italic;
text-align: center;
}

Related

HTML CSS: Adding in new lines

I am following the tutorial/code described here. The specific code in question is this part:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Harrison Kinsley</title>
<meta charset="utf-8" />
{% load staticfiles %}
<link rel="stylesheet" href="{% static 'personal/css/bootstrap.min.css' %}" type = "text/css"/>
<meta name="viewport" content = "width=device-width, initial-scale=1.0">
<style type="text/css">
html,
body {
height:100%
}
</style>
</head>
<body class="body" style="background-color:#f6f6f6">
<div class="container-fluid" style="min-height:95%; ">
<div class="row">
<div class="col-sm-2">
<br>
<center>
<img src="{% static 'personal/img/profile.jpg' %}" class="responsive-img" style='max-height:100px;' alt="face">
</center>
</div>
<div class="col-sm-10">
<br>
<center>
<h3>Programming, Teaching, Entrepreneurship</h3>
</center>
</div>
</div><hr>
<div class="row">
<div class="col-sm-2">
<br>
<br>
<!-- Great, til you resize. -->
<!--<div class="well bs-sidebar affix" id="sidebar" style="background-color:#fff">-->
<div class="well bs-sidebar" id="sidebar" style="background-color:#fff">
<ul class="nav nav-pills nav-stacked">
<li><a href='/'>Home</a></li>
<li><a href='/blog/'>Blog</a></li>
<li><a href='/contact/'>Contact</a></li>
</ul>
</div> <!--well bs-sidebar affix-->
</div> <!--col-sm-2-->
<div class="col-sm-10">
<div class='container-fluid'>
<br><br>
{% block content %}
{% endblock %}
</div>
</div>
</div>
</div>
<footer>
<div class="container-fluid" style='margin-left:15px'>
<p>Contact | LinkedIn | Twitter | Google+</p>
</div>
</footer>
</body>
</html>
When I run this code, the links to 'Home', Blog' and 'Content' pages are all on one line, with no spaces between them (i.e. the links are like this: HomeBlogContent).
I want them to look like:
Home
Blog
Content
When I add this line into the code:
<p>This is<br>a paragraph<br>with line breaks</p>
The output is as expected:
This is
a paragraph
with line breaks
When I replace the strings in this line, like this:
<p><li><a href='/'>Home</a></li><br>li><a href='/blog/'>Blog</a></li><br>li><a href='/contents/'>Contents</a></li></p>
I would have hoped that solved my problem, but it doesn't. Can someone tell me where I'm going wrong, how can I get the Home, Blog and Content links to print on separate lines? Thanks.

You are missing the left bracket for your <li> tags.
Or if you're not a noob just get rid of those <br> tags. <li> will go to next line automatically.
nav {
display: flex;
flex-direction: column;
}
<nav>
<a href='/'>Home</a>
<a href='/blog/'>Blog</a>
<a href='/contents/'>Contents</a>
</nav>

Your markup looks good to me in the original file. However, from the problem you are describing sounds like there is something wrong with how you are importing Bootstrap 3 into this file. Check that you have the file bootstrap.min.css where you say you have it under personal/css/bootstrap.min.css

This should work.
<ul>
<li><a href='/'>Home</a></li>
<li><a href='/blog/'>Blog</a></li>
<li><a href='/contents/'>Contents</a></li>
</ul>

login_required decorator in Django doesn't work

I'm working on a Django(1.10) project in which I need to load a template only for logged in users, which is coming from profile template.I need to load generateCert.html only for logged in user, this template should display the same navbar as profile template because both of these templates have the same header.
Here's my generateCert.html template:
{% load staticfiles %}
{% load static from staticfiles %}
{% load mathfilters %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>NAMI Montana | User's Dashboard</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta name="description" content=""/>
<meta name="author" content="http://webthemez.com"/>
<!-- css -->
<link href="{% static 'css/bootstrap.min.css' %}" rel="stylesheet"/>
<link href="{% static 'css/fancybox/jquery.fancybox.css' %}" rel="stylesheet">
<link href="{% static 'css/flexslider.css' %}" rel="stylesheet"/>
<link href="{% static 'css/style.css' %}" rel="stylesheet"/>
<script src="https://www.paypalobjects.com/api/checkout.js"></script>
<!--Pulling Awesome Font -->
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]><![endif]-->
<style>
input[type="image"] {
padding-left: 30%;
padding-top: 5%;
font-size: 1em;
color: #fff;
background: transparent;
border: 1px solid #fff;
font-weight: bold;
width: 70%;
}
</style>
</head>
<body>
<div class="topbar">
<div class="container">
<div class="row">
<div class="col-md-12">
<p class="pull-left hidden-xs"><i class="fa fa-envelope"></i><span>matt#namimt.org </span></p>
<p class="pull-right"><i class="fa fa-phone"></i>Tel No. (406) 443-7871</p>
</div>
</div>
</div>
</div>
<!-- start header -->
<header>
<div class="navbar navbar-default navbar-static-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<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 'images/logo.png' %}" alt="logo"
width="190px" height="50px;"/></a>
</div>
<div class="navbar-collapse collapse ">
<ul class="nav navbar-nav">
{% if not user.is_authenticated %}
<li>Home</li>
<li>About</li>
<li>Blog</li>
<li>Login</li>
<li>SignUp</li>
<li>Contact</li>
{% endif %}
{% if user.is_authenticated %}
<li>Home</li>
<li>Dashboard</li>
<li class="active">Profile</li>
<li>Logout</li>
<li>Contact</li>
{% endif %}
</ul>
</div>
</div>
</div>
</header>
<!-- end header -->
<div class="container">
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-8" style="margin-top: 5%">
<div class="panel panel-default">
<div class="panel-heading">
<h4> You have to pay <b> $95 </b> to generate your certificate.</h4>
</div>
{% block content %}
{{ form.render }}
{% endblock %}
</div>
</div>
</div>
</div>
{% include 'footer.html' %}
Here are my views.py:
#login_required
def payment_process(request):
if request.user.is_authenticated():
minutes = int(request.user.tagging.count()) * 5
testhours = minutes / 60
hours = str(round(testhours, 3))
# pdb.set_trace()
# What you want the button to do.
invoice = generate_cid()
paypal_dict = {
"business": settings.PAYPAL_RECEIVER_EMAIL,
"item_name": "Certificate of Completion from Nami Montana",
"custom": {"name": str(request.user.first_name + ' ' + request.user.last_name),
"hours": str(hours)},
"invoice": str(invoice),
"amount": "5.00",
"notify_url": "https://8bf57d43.ngrok.io/users/paypal/",
# "return_url": "https://b906ef46.ngrok.io/users/profile/",
"cancel_return": "https://8bf57d43.ngrok.io/users/cancel/",
}
print(paypal_dict)
# Create the instance.
form = PayPalPaymentsForm(initial=paypal_dict)
context = {"form": form}
return render_to_response("users/generateCert.html", context)
else:
return HttpResponseRedirect('/users/login')
Here is my urls.py:
url('^process/$', views.payment_process, name='payment'),
generateCert.html template display the menu of Anonymous users not logged in users menu, that means this template loaded by the unauthenticated user. How can I strict this template to only logged in users as it's coming from the profile page.

No, it doesn't mean that at all. What it does mean is that you are not passing the user to the template. This is because you are using render_to_response - which apart from anything else is deprecated - rather than the render shortcut which runs context processors.
Note, your login_required decorator makes that if request.user.is_authenticated() check pointless; the user will never not be authenticated.
Also note that you really should be using template inheritance to break out things like the top nav and the HTML boilerplate into their own templates.

can't get rid of gap between header and body

I have tried everything from editing padding/margins to saving file as utf-8 without BOM in notepad suggested in other posts to get his gap to go away. Nothing is seems to work so I come to ask for help.
I am developing this webpage using python/django framework in which my base.html file looks like this
{% load bootstrap3 %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Michael Goytia</title>
{% bootstrap_css %}
{% bootstrap_javascript %}
</head>
<body>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Static navbar -->
<nav class="navbar navbar-custom 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">
<!-- put three little bars in toggle button-->
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="{% url 'personal_info:index' %}"style="color:#6C9F9F"><i class="fa fa-user-secret"></i>
<b>Michael Goytia</b></a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="{% url 'personal_info:about_me' %}"style="color:#6C9F9F"><i class="fa fa-user-circle-o"></i>
<b>About Me</b></a>
</li>
<li><a href="{% url 'personal_info:projects' %}"style="color:#6C9F9F"><i class="fa fa-paper-plane"></i>
<b>Projects</b></a>
</li>
<li><a href="{% url 'personal_info:contact' %}"style="color:#6C9F9F"><i class="fa fa-address-book"></i>
<b>Contact Information</b></a>
</li>
</ul>
</div><!--/.nav-collaspse -->
</div>
</nav>
<div class="container">
<div class="page-header">
{% block header %}{% endblock header %}
</div>
<div>
{% block content %}{% endblock content %}
</div>
</div><!-- /container -->
<!-- Place this tag in your head or just before your close body tag. -->
<script async defer src="https://buttons.github.io/buttons.js"></script>
<style>
.navbar-custom
{
background:#013737;
border-radius:0;
}
.navbar-toggle .icon-bar
{
background-color:#6C9F9F;
}
.navbar-header .navbar-toggle
{
background-color:#0F5151;
}
footer{
background:#013737;
position:fixed;
left:0px;
bottom:0px;
height:80px;
width:100%;
}
body{
background:#438383;
padding: 0;
margin: 0;
}
.nav > li >a:hover{
background-color:#256A6A;
}
</style>
</body>
<footer>
</footer>
</html>
I believe the problem resides in my base.html file however here is a sample html of another page that use base.html
{% extends "personal_info/base.html" %}
{% block content %}
<h1><b><u>Projects</u></b><h1>
<div class="panel panel-custom">
<div class="panel-heading">
<h1>
<b><center>Github Information</center></b>
</h1>
</div>
<div class="panel-body">
<div class="github-card" data-github="goytia54" data-width="400" data-height="150" data-theme="default"></div>
<script src="//cdn.jsdelivr.net/github-cards/latest/widget.js"></script>
</div>
</div> <!--panel -->
<div class="panel panel-custom">
<div class="panel-heading">
<h1>
<b><center>Academic</center></b>
</h1>
</div>
<div class="panel-body">
</div>
</div> <!--panel -->
<div class="panel panel-custom">
<div class="panel-heading">
<h1>
<b><center>Personal</center></b>
</h1>
</div>
<div class="panel-body">
</div>
</div> <!--panel -->
<style>
.panel-custom .panel-heading{
background-color:#013737;
color:#6C9F9F;
border-radius: 50px 15px;
}
.panel-custom
{
background-color:#438383;
}
</style>
{% endblock content %}
I am new to web development so any help would me much appreciated.

Alright well after playing around with a bunch of things I realized somehow I had a border around my header. So in order to get rid of it I added the line
.container .page-header { border-bottom: 0px:} which then got rid of this border.
Not sure why the border was there in the first place.
If anyone comes along I hope this helps.

the css file doesn't work when in the Django app

when i use static file in my django app,i found a strange problem : that when i use body{ } in the css file can change the body's attributes ,when i use the div's id or class name ,the css file doesn't work on the div's attributes like this:
the base.html:
<!DOCTYPE html>
{% load staticfiles %}
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{% block title %} Food {% endblock title %}</title>
<link rel="stylesheet" href="{% static "style/index.css" %}" media="screen"/>
</head>
<body>
<div class="sidebar">
{% block sidebar %}
{% endblock %}
</div>
<div class="content">
{% block content %}
<i>Delicious</i>
{% endblock %}
</div>
</body>
</html>
and the index.html:
{% extends "blog/base.html" %}
{% block title %} Food title{% endblock title %}
{% block content %}
<div class="body-head">
</div>
<div class="body-middle">
</div>
<div class="body-foot">
</div>
{% endblock content %}
the index.css:
body {
height: 100%;
width: 100%;
background-color: brown;
}
.sidebar{
width: 100%;
height: 10%;
background-color: seagreen;
}
.body-head {
width: 100%;
height: 50%;
background-color: sandybrown;
}
only the body{ }can be effect.and others like .sidebar{ } and .body-head{ } do no effect.

Your sidebar block and .body-head div are empty.
Is this your whole page or just an example?
If you can see body styles, I suppose the css file is well referenced.

Why bootstrap doesn't work although I have loaded it, etc. (Django project)?

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

Categories