Good day
I have the following issue, I have, as far as my knowledge allows me,
I have tried using the bootstrap CDN and also the pip package installer method, but when I try get my modal to show then I cant get it work, could someone have a look at my code and let me know
index.html
{% load static %} {% load bootstrap5 %}
<!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.0" />
<title>Landing Page</title>
{% comment %} Bootstrap {% endcomment %}
<link
href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x"
crossorigin="anonymous"
/>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4"
crossorigin="anonymous"
></script>
<link rel="stylesheet" href="{% static 'css/style.css' %}" />
<script type="text/javascript">
$(window).on("load", function () {
$("#myModal").modal("show");
});
</script>
</head>
<body>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button>
<div class="modal hide fade" id="myModal">
<div class="modal-header">
<a class="close" data-dismiss="modal">x</a>
<h3>Modal header</h3>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
Close
Save changes
</div>
</div>
{% comment %} header {% endcomment %}
<header>
<img src="" alt="" />
</header>
{% comment %} Main Conntent {% endcomment %}
<main>
<div class="row">
<div class="text-center">
<button
id="btnSubmit"
type="submit"
class="btn btn-danger py-2 px-5 text-center d-flex align-items-end"
>
Enter
</button>
</div>
</div>
</main>
{% comment %} Footer {% endcomment %}
<footer>
<p>give it an ice cold shot</p>
</footer>
</body>
</html>
According to the documentation I have included bootstarp54 in my installed apps on the settings.py
settings.py
INSTALLED_APPS = [
'comp.apps.CompConfig',
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'cloudinary_storage',
'django.contrib.staticfiles',
'cloudinary',
'bootstrap5',
]
What is the best practice and the best way to load on a modal on load, I am quite new to all frameworks and I have extensively been learning JavaScript for a while,
Does anyone know if jQuery is included in the pip install pacakges method?
You are trying to use jquery, when it is not necessary (and not available as far as I can see)
You can just use vanilla JS:
window.onload = (event) => {
console.log("page is fully loaded");
};
Related
To test modal creations in python with django I created a test app named modalTestApp.
Then I copied this html that I got off of the bootstrap website and pasted it into the main.html inside the app, without changing it. The webpage from the app loads fine but clicking the button to preview the modal does nothing. What am I doing wrong here?
main/base.html:
{% load static %}
<!DOCTYPE html>
<html>
<head>
<script src={% static "jquery/jquery-3.3.1.slim.min.js" %}></script>
<script src={% static "jquery/jquery.min.js" %}></script>
<script type="text/javascript" src={% static 'tablesorter-master/js/jquery.tablesorter.js' %}></script>
<script src={% static "bootstrap-4.3.1-dist/js/popper.min.js" %}></script>
<script src={% static "bootstrap-4.3.1-dist/js/bootstrap.min.js" %}></script>
<style type="text/css">
.main {
margin-top: 50px;
padding: 10px 0px;
}
</style>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href={% static "bootstrap-4.3.1-dist/css/bootstrap.min.css" %}>
<title>{% block title %} {% endblock title %}</title>
</head>
<body>
<nav class="navbar navbar-dar bg-dark pb-0 pr-0">
<ul class="nav flex-row">
<p class="navbar-brand mb-0 pt-0" style="color: #eee">Weather Data</p>
Home
{% if user.is_authenticated %}
Stations
{% endif %}
</ul>
<ul class="nav justify-content-end">
{% if not user.is_authenticated %}
Register
Login
{% else %}
logout
Profile
{% endif %}
</ul>
</nav>
{% block content %}
{% endblock content %}
</body>
</html>
main.html:
{% extends "main/base.html" %}
{%block content %}
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
Launch demo modal
</button>
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
{% endblock content %}
EDIT:
console output + webpage preview (same before and after button clicked):
I think that you do not need to write the script tag, you need to write how it is done in the bootstrap documentation - https://getbootstrap.com/docs/5.1/getting-started/introduction/#starter-template
Just as example
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 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">
<title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>
<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>
You also need to see the django documentation on how to insert static files, this will help you use your pictures, styles, javascript - https://docs.djangoproject.com/en/3.2/howto/static-files/
Also, just as example
settings.py (Root setting)
# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/3.2/howto/static-files/
STATIC_URL = "/static/"
STATICFILES_DIRS = [str(BASE_DIR.joinpath("static"))]
urls.py (root urls)
urlpatterns = [
path("admin/", admin.site.urls),
] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
It seems like the problem is the template file is not fetching right css and js or may be your directory is not correct. Check my code below its working fine. Thanks
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
I'm following a tutorial to make websites with Django. I'm currently trying to add a navigation bar using bootstrap CDN but the following appears. The code I am using is posted below.
There is no navigation bar present:
Below is the code is used.
<!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">
<!-- Bootstrap CSS -->
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81i\
uXoPkFOJwJ8ERdknLPMO"
crossorigin="anonymous">
<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>
<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>
<!-- 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+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4\
YfRvH+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+9J3UJ46jBk0WLaUAdn689aCwoqbB\
JiSnjAK/
l8WvCWPIPm49"
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>
</body>
</html>
The site is supposed to display a navigation bar with the users name at the top right.
to use CDN you need active internet connection, here looks like either you are developing offline or your django project does not have access to internet.
if developing offline is your requirement, then you may download those CDN files, then use them.
I am using django-crispy-forms for my django project, and reading in the documentation I saw that to be able to use bootstrap3 features (like horizontal forms), I need to set bootstrap3 as my crispy template pack by adding this line in the settings.py of my project:
CRISPY_TEMPLATE_PACK = 'bootstrap3'
According to the docs, crispy's default is bootstrap v2. But after adding bootstrap3 in my settings, when I run my application in my development machine I get this error:
TemplateDoesNotExist at /dashboard/
bootstrap3/field.html
Request Method: POST
Request URL: http://localhost:8000/dashboard/
Django Version: 1.7.3
Exception Type: TemplateDoesNotExist
Exception Value:
bootstrap3/field.html
Exception Location: C:\Python27\VirtualEnvs\Tlaloc\lib\site-packages\django\template\loader.py in find_template, line 136
Python Executable: C:\Python27\VirtualEnvs\Tlaloc\Scripts\python.exe
Python Version: 2.7.7
If I remove the CRISPY_TEMPLATE_PACK line from my settings (as to use the defaults) or change it to look like this:
CRISPY_TEMPLATE_PACK = 'bootstrap'
Then I don't get an error anymore, but then the form-horizontal class doesn't work in my form.
This is how my form looks like in forms.py
class UserForm(forms.Form):
user = forms.CharField(label='Account', max_length=15)
password = forms.CharField(widget=forms.PasswordInput())
# Crispy forms code
def __init__(self, *args, **kwargs):
super(UserForm, self).__init__(*args, **kwargs)
self.helper = FormHelper()
self.helper.form_class = 'form-horizontal'
self.helper.label_class = 'col-sm-2'
self.helper.field_class = 'col-sm-10'
self.helper.layout = Layout(
Fieldset(
'',
'user',
'password',
),
Div(FormActions(
Submit('continue', 'Continue', css_class='btn btn-primary'),
Button('cancel', 'Cancel', css_class='btn btn-default',
data_dismiss='modal'),
),
css_class='modal-footer'
)
)
And this is part of my template:
{% load crispy_forms_tags %}
<div class="modal fade" id="adAccountModal" tabindex="-1" role="dialog" aria-labelledby="authenticationLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="authenticationLabel">{{ config_values.environment_name }} Environment Authentication</h4>
</div>
<div class="modal-body">
<p>Please enter the account and password that will be used to authenticate in the selected environment.</p>
{% crispy user_form %}
</div>
{% comment %}
The footer will be added through the user_form using Crispy Forms.
The following code will be just left here as reference.
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-primary">Continue</button>
</div>
{% endcomment %}
</div>
</div>
</div>
What am I doing wrong?
Turned out that the bootstrap3 template directory didn't exist in my installation of crispy forms.
I had Crispy Forms version 1.3.2 installed on my Windows system. And looking in the project page in github I saw that the current version, which at the moment is 1.4.0, did have the \crispy_forms\templates\bootstrap3 directory. Looks like bootstrap3 template pack was introduced until this version, older versions didn't have the template pack. I upgraded to the current version, and it is now working.
In the settings.py file, include this:
CRISPY_ALLOWED_TEMPLATE_PACKS = ('bootstrap', 'uni_form', 'bootstrap3', 'foundation-5')
Then, in the register.html write this code:
<!DOCTYPE html>
<!-- {% load static %} -->
<!-- {% load crispy_forms_tags %} -->
<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, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>Django CRM - Register</title>
<!-- Custom fonts for this template-->
<link href="{% static 'vendor/fontawesome-free/css/all.min.css' %}" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">
<!-- Custom styles for this template-->
<link href="{% static 'css/sb-admin-2.min.css' %}" rel="stylesheet">
</head>
<body class="bg-gradient-primary">
<div class="container">
<div class="card o-hidden border-0 shadow-lg my-5">
<div class="card-body p-0">
<!-- Nested Row within Card Body -->
<div class="row">
<div class="col-lg-2 d-none d-lg-block"></div>
<div class="col-lg-8">
<div class="p-5">
<div class="text-center">
<h1 class="h4 text-gray-900 mb-4">Create an Account!</h1>
</div>
<form method="POST">
{% csrf_token %}
{{form|crispy}}
<button type="submit" class="btn btn-primary">Submit</button>
</form>
<hr>
<div class="text-center">
<a class="small" href="#">Forgot Password?</a>
</div>
<div class="text-center">
<a class="small" href="#">Already have an account? Login!</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Bootstrap core JavaScript-->
<script src="{% static 'vendor/jquery/jquery.min.js' %}"></script>
<script src="{% static 'vendor/bootstrap/js/bootstrap.bundle.min.js' %}"></script>
<!-- Core plugin JavaScript-->
<script src="{% static 'vendor/jquery-easing/jquery.easing.min.js' %}"></script>
<!-- Custom scripts for all pages-->
<script src="{% static 'js/sb-admin-2.min.js' %}"></script>
</body>
</html>
I have a base template that includes another template for a drop down menu. If I hard code items for the li tag, it works fine. If I try to pass the objects.all(), it doesn't fill. Here's my setup:
Model
class Category(models.Model):
name = models.CharField(max_length=40, blank=True)
def __unicode__(self): # Python 3: def __str__(self):
return self.name
View
def dropdown_cats(request):
cats = Category.objects.all()
return render(request, 'home/dropdown-cats.html', {'cats': cats})
home/base.html
<!DOCTYPE html>
{% load staticfiles %}
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<link rel="shortcut icon" href="{% static 'media/logo.png' %}">
<title>something.com</title>
<!-- Bootstrap core CSS -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="{% static 'dist/css/bootstrap.css' %}" type="text/css" media="screen" />
<link href="{% static 'dist/css/bootstrap.min.css' %}" rel="stylesheet" media="screen">
<!-- Custom CSS -->
<link href="{% static 'dist/css/custom.css' %}" rel="stylesheet" media="screen">
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div id="site_wrapper" class="clearfix">
<!-- Above-Nav
================================================== -->
<div class="above-nav visible-desktop">
<div class="container" style="text-align:center;">
</div>
</div>
<!--END above-nav
================================================== -->
<!-- Navbar ==================================== -->
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<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={{home}}>something.com</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
{% block navbar %}
{% endblock navbar %}
</ul>
</div>
</div><!--/.nav-collapse -->
</div><!-- navbar-inner -->
</div>
<!-- End Navbar =================================== -->
<!-- Start Grid layout ============================ -->
<!--<div class="container-fluid">-->
<div class="container-fluid">
<div class="row" style="text-align:center">
<div class="col-xs-3"><h2>My Most Recent Blogs</h2>
{% block left_side %}
{% endblock left_side %}
</div>
<div class="col-xs-6">
{% block middle %}
{% endblock middle %}
</div>
<div class="col-xs-3"><h2>Links</h2>
{% block right_side %}
{% endblock right_side %}
</div>
</div>
</div>
<!-- End Grid Layout ====================== -->
</div>
<!-- close the wrapper ====================== -->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="{% static 'dist/js/bootstrap.min.js' %}"></script>
</body>
</html>
home/home.html
{% extends "home/base.html" %}
{% block navbar %}
<li>About</li>
<li>Contact</li>
<li class="dropdown">
Categories<span class="caret"></span>
{% include 'home/dropdown-cats.html' %}
</li>
<li>Previous Blogs</li>
<form class="navbar-form navbar-right" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
{% endblock navbar %}
{% block left_side %}
{% endblock left_side %}
{% block middle %}
{% endblock middle %}
{% block right_side %}
{% endblock right_side %}
home/dropdown-cats.html
<ul class="dropdown-menu">
{% if cats %}
{% for cat in cats %}
<li>{{ cat.name }}</li>
{% endfor %}
{% else %}
<li>BAD TEST</li>
{% endif %}
</ul>
If I test this by replacing the url tag in the for loop with something similar like GOOD TEST, there's still nothing inserted because cats is empty. All I get is one drop down entry "BAD TEST". I've used the shell to ensure Category.objects.all() returns the list as of categories as it should.
No idea how that Post statement got in the view there. Must have accidentally pasted it it. Anyways, I've excluded it from the view and included all my html for more details. I THINK I understand what you're saying Daniel, but I'm a bit confused. Isn't this how the tutorial modifies templates, by including it in the render parameters: render(request, 'template.html', dicts)
You don't really show enough information here, but I suspect you're getting confused about templates and views. Simply including another template doesn't "call" another view: the only thing that calls views is the URL handler. Templates themselves don't know anything about views.
If you want to dynamically add context for another template, you need to make it into a custom inclusion tag.
Replace the snippet in your Template with:
<ul class="dropdown-menu">
{% for cat in cats %}
<li>{{ cat.name }}</li>
{% empty %}
<li>BAD TEST</li>
{% endfor %}
</ul>
The above will definitely work as long as the cats queryset as set in your View code has 1 or more items. The for .. empty template tag used in the template code above is documented here.
The password reset templates are stored in:
/usr/local/lib/python2.7/dist-packages/django/contrib/admin/templates/registration
However, I want to override the default templates provided my Django. I don't want to directly go to that directory and edit the template. Thus, I created password reset templates with same name in templates/registration directory. However, I am still getting the same inbuild django template. My one template password_reset_form.html looks like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>ATS | Password Reset Form</title>
<!--google web font-->
<link href='http://fonts.googleapis.com/css?family=Droid+Serif:400,400italic,700|Lato:700,300,400' rel='stylesheet' type='text/css'>
<!--style sheets-->
<link rel="stylesheet" media="screen" href="{{ STATIC_URL }}bootstrap/css/bootstrap.css"/>
<link rel="stylesheet" media="screen" href="{{ STATIC_URL }}bootstrap/css/style.css"/>
<link rel="stylesheet" media="screen" href="{{ STATIC_URL }}bootstrap/css/static.css"/>
<style>
li
{
list-style-type: none;
padding: 0px;
margin: 0px;
}
#footer {
margin-top: 40px;
}
</style>
<!--jquery libraries / others are at the bottom-->
<script src="{{ STATIC_URL }}bootstrap/js/jquery-1.7.1.min.js" type="text/javascript"></script>
</head>
<body>
<!-- Header starts
================================================== -->
<header id="header">
<div class="container">
<div class="row">
<!--logo starts-->
<div class="span4"> <img src="{{ STATIC_URL }}bootstrap/img/auto.png"> </div>
<!--logo ends-->
</div>
</header>
<div class="container">
<h2 class="lead text-center">Password Reset</h2><br /> <br />
<form action="" class="well span10" method="post">
{% csrf_token %}
{% block content %}
<p class="text-info text-center"><strong>Forgotten your password? Enter your e-mail address below, and we'll e-mail instructions for setting a new one.</strong></p>
<span class="text-error text-center"><strong> {{ form.email.errors }}</strong></span><br/>
<p class="text-center"><label for="id_email">Enter your E-mail address:</label> {{ form.email }}</p>
<p class="text-center"><button class="btn btn-success">Reset my Password</button></p>
</form>
{% endblock %}
</div>
<footer id="footer">
<div class="container">
<div class="row">
<!--small intro and copyright starts-->
<div class="span7">
<a data-toggle="tab" href="/how_it_works/">How it works? </a>
<a data-toggle="tab" href="/how_it_works/">Terms and Conditions </a>
<a data-toggle="tab" href="/how_it_works/">How to use? </a> <br /><br />
<p class="copyright"> ©2013 Automatic Text Summarization(ATS) </p>
</div>
Is there something I am missing in the template?
Have you placed your template in your apps directory? If so specify your app before django.contrib.admin in INSTALLED_APP setting.
If you have placed the template in some other folder, verify you have appropriately added the directory in TEMPLATE_DIRS and in filesystem loader is before _app_directories _loader in TEMPLATE_LOADERS.
So it should be
TEMPLATE_LOADERS = (
'django.template.loaders.filesystem.Loader',
'django.template.loaders.app_directories.Loader',
)
More reference at Template loaders