When running the webapp a 404 error appears, the error doesnt even allow my error html to run even when changing it to the most basic of templates. I dont know where my request is being not found.
Ive tried removing all of the style sheets from base.html to see if its those, I tried changing the error.html to see if it will actually run I've attempted to comment out all url_for's in the html files.
I commented out the results bit so i dont think its that.
routes.py
from app import app
from flask import Flask, abort, jsonify, redirect, url_for, request, render_template
from werkzeug.exceptions import HTTPException
from app.results import clean_data, get_response
#app.errorhandler(Exception)
def handle_error(e):
'''
code = 500
if isinstance(e, HTTPException):
code = e.code'''
print(str(e))
return render_template("error.html")
#app.route('/', methods=['GET', 'POST'])
def index():
data = clean_data(request.form)
response = get_response(data)
print(response)
return render_template("index.html")
base.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Default Scorer -- Ebury</title>
<meta name = "viewport" content = "width=device-width", initial-scale = 1, shrink-to-fit=no">
<link rel="icon" href="{{ url_for('static', filename='favicon.ico') }}">
<!-- CSS-->
<link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
<link href="https://fonts.googleapis.com/css?family=Roboto:100" rel="stylesheet">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- JS-->
<!-- [if lt IE 9]><script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js" type="text/javascript"></script><![endif] -->
<script src="https://ebury-chameleon.s3.amazonaws.com/1.17.0/scripts/ebury-chameleon.js" type="text/javascript"></script>
</head>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="/">
<img src="{{ url_for('static', filename='img/Ebury.png') }}" width="80" height="30" alt="">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-item nav-link active" href="/"><b>Default Scorer</b> <span class="sr-only">(current)</span></a>
</div>
<div class="navbar-nav ml-auto">
<a class="nav-item nav-link" href="/logout">Log out</a>
</div>
</div>
</nav>
<body>
</body>
</html>
index.html(only relevant parts its got a lot of forms)
{% extends "base.html" %}
{% block title %}Index{% endblock %}
{% block content %}
<div class="m-1 pb-3"></div>
<div class="container-fluid">
<div class = "row">
<div class="col-md-3 push-md-3">
<div class = "m-0 pb-0">
<form action="" method="post" role="form" class="needs-validation" novalidate>
<div class="container">
<div class = "form-group">
<div class = "row">
<div class="input-group input-group-sm mb-3">
<div class="input-group-prepend">
<span class = "input-group-text">BVD ID Number</span>
</div>
<input type = "text" class = "form-control" id = "bvd_id_number" name = "bvd_id_number">
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
{% endblock %}
{% block scripts %}
<script>
(function() {
'use strict';
window.addEventListener('load', function() {
// Fetch all the forms we want to apply custom Bootstrap validation styles to
var forms = document.getElementsByClassName('needs-validation');
// Loop over them and prevent submission
var validation = Array.prototype.filter.call(forms, function(form) {
form.addEventListener('submit', function(event) {
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
form.classList.add('was-validated');
}, false);
});
}, false);
})();
</script>
{% endblock %}
error.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ERROR</title>
</head>
<body>
<h1>ERROR</h1>
</body>
</html>
So what happens is that the form doesnt appear and it seems only base.html appears with nothing else, the icon doesnt appear either but I tried commenting that out and that doesnt work.
The error printed is "404 Not Found: The requested URL was not found on the server. IF you entered the URL manually please check your spelling and try again"
To future people: I solved because the base.html did not specify where it had to be extended. The correct base.html code would be:
<html>
<head>
<meta charset="utf-8">
<title>Default Scorer -- Ebury</title>
<meta name = "viewport" content = "width=device-width", initial-scale = 1, shrink-to-fit=no">
<link rel="icon" href="{{ url_for('static', filename='favicon.ico') }}">
<!-- CSS-->
<link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
<link href="https://fonts.googleapis.com/css?family=Roboto:100" rel="stylesheet">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- JS-->
<!-- [if lt IE 9]><script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js" type="text/javascript"></script><![endif] -->
<script src="https://ebury-chameleon.s3.amazonaws.com/1.17.0/scripts/ebury-chameleon.js" type="text/javascript"></script>
</head>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="/">
<img src="{{ url_for('static', filename='img/Ebury.png') }}" width="80" height="30" alt="">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-item nav-link active" href="/"><b>Default Scorer</b> <span class="sr-only">(current)</span></a>
</div>
<div class="navbar-nav ml-auto">
<a class="nav-item nav-link" href="/logout">Log out</a>
</div>
</div>
</nav>
<body>
{% block content %}
{% endblock %}
</body>
{% block scripts %}
{% endblock %}
</html>```
Related
I am learning flask by watching some video tutorials. I have an app.py file in which I am rendering login.html which is an extension of base.html. I don't know why but my form is somehow not appearing on the webpage.
**app.py - **
from flask import Flask , redirect , url_for , render_template , request , flash
app = Flask(__name__)
#app.route("/")
def home():
return render_template("index.html" )
#app.route("/login", methods=["GET","POST"])
def login():
return render_template("login.html")
#app.route("/<usr>")
def user(usr):
return f"<h1> {usr} </h1>"
if __name__ == "__main__":
app.run(debug=True)
**login.html - **
{% extends "base.html" %}
{% block title %} Login Page {% endblock %}
{% block content %}
<form action= "#" method ="post">
<p>Name:</p>
<p><input type = "text" name = "nm" /></p>
<p><input type = "submit" value = "submit" /></p>
</form>
{% endblock %}
This is my base.html file. As I told earlier , I am getting no error but a blank page.
base.html
<!DOCTYPE html>
<html lang="en">
<head>
<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">
<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{% block title%}{% endblock%}</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
</div>
</nav>
<h1>My website</h1>
{% block content %}
{% endblock %}
<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>
</body>
</html>
Kindly check login.html filepath, as it needs to be in the same app folder.
Then,just add simple code in login.html as below:
<html>
<head>
</head>
<body>Test login page</body>
</html>
Check what error you get in logs/browser.
You are sure, you wrote localhost:.../login
or write curl -X POST localhost:.../login in your terminal/cmd
if this is not helping you, tell me when are you seeing the error!
For some reason, my CSS code is not connecting with my HTML. I am not sure why this is happening what to do to fix the issue. home.html should be connecting to the CSS file main.css. I have added the static file block to the base.html and home.html since home extends base but the issue is still occurring.
base.html
{%load static%}
<!DOCTYPE html>
<html>
<head>
<title>TweetyBird</title>
<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.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" type= "text/css" href="{% static 'css/main.css' %}" >
<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>
</head>
<head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="/">TweetyBird</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarText">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Company Registration</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Company Sign in</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/search">Search by Tweet <span class="sr-only">(current)</span></a>
</li>
</ul>
</nav>
</div>
</head>
{%block staticfiles%}
{% endblock %}
</nav>
{% block content %}
{% endblock %}
</body>
</html>
home.html
{% extends 'base.html' %}
{%load static%}
{%block staticfiles%}
<link rel="stylesheet" type= "text/css" href="{% static 'css/main.css' %}" >
{% endblock %}
<body>
{% block content %}
<div class="banner">
<div class="app-text">
<h1>Text</h1>
<p> Text </p>
</div>
{% endblock %}
</body>
main.css
body
{
background-color: lightblue;
}
.banner{
width: 80%;
height: 70%;
top: 25%;
left: 130px;
position: absolute;
color: #fff;
}
.app-text{
width: 50%;
float: left;
}
.app-text h1{
font-size: 43px;
width: 640px;
position: relative;
margin-left: 40px;
}
Is your CSS file in a different folder from the HTML file? If so, you might want to ../css/main.css instead.
Your link should be in head section. So, change your base.html. Here, it goes:
{% load static%}
<!DOCTYPE html>
<html>
<head>
<title>TweetyBird</title>
<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.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" type= "text/css" href="{% static 'css/main.css' %}" >
<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>
{% block staticfiles %}
{% endblock %}
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="/">TweetyBird</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarText">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Company Registration</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Company Sign in</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/search">Search by Tweet <span class="sr-only">(current)</span></a>
</li>
</ul>
</div>
</nav>
{% block content %}
{% endblock %}
</body>
</html>
*Note:- There were some tags closed which was never opened like inner nav tag. Also, do not forget to use {% load static%} at the top of inheriting htmls.
I've had the exact same problem like two weeks ago. It's important to know which folder you are in. so, it's not working because the location 'css/main.css' is incorrect. try going outside of this folder, maybe back another folder and try looking for the exact location.
I was making a site with Django in which I was applying CSS properties to an extended template file. The CSS file is imported in parent template and is used in child template. But it isn't showing any changes in child template. Here's my code:
.c1 a:hover {
background-color: #1D1C1C;
color: white;
}
.theta {
position: relative;
left: 100px;
}
{% load static %}
<!DOCTYPE html>
<!-- Parent File -->
<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>Site</title>
<link href="{% static 'css/bootstrap-4.4.1.css' %}" rel="stylesheet" type="text/css">
<link href="{% static 'css/style.css' %}" rel="stylesheet" type="text/css">
<!-- <link href="../static/css/bootstrap-4.4.1.css" rel="stylesheet" type="text/css"> -->
<!-- <link href="../static/css/style.css" rel="stylesheet" type="text/css"> -->
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark"> <a class="navbar-brand" href="{% url 'home' %}">Site</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent1" aria-controls="navbarSupportedContent1" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent1">
<ul class="navbar-nav mr-auto">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle text-white" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">A</a>
<div class="dropdown-menu c1" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">a</a>
<a class="dropdown-item" href="#">b</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link text-white" href="#">B</a>
</li>
</ul>
</div>
</nav>
{% block content %}
{% endblock %}
<script src="{% static 'js/jquery-3.4.1.min.js' %}"></script>
<script src="{% static 'js/popper.min.js' %}"></script>
<script src="{% static 'js/bootstrap-4.4.1.js' %}"></script>
<!-- <script src="../static/js/jquery-3.4.1.min.js"></script>
<script src="../static/js/popper.min.js"></script>
<script src="../static/js/bootstrap-4.4.1.js"></script>
-->
</body>
</html>
<!-- Child File -->
{% extends "index.html" %}
{% block content %}
<br>
<div class="theta">
{% for i in theta %}
{{ i }}
<br>
{% endfor %}
</div>
<br>
{% endblock %}
Is there any additional loc required to show those changes in child template?
use this for clear collect static files:
python manage.py collectstatic --no-input --clear
I have a file that extends my base HTML file and this file contains a form. I want to create a margin for the form and also change the color of the submit button and form text box to match the theme of my website. How do I go about doing this in my CSS file? As of now, the margin does not seem to be working and I am also not sure how I would change the color as I mentioned earlier.
search.html file
{% extends 'base.html' %}
{%load static%}
<link rel="stylesheet" type= "text/css" href="{% static 'css/form.css' %}" >
<body>
{% block content %}
<container >
<center>
<form action="/searchoutput/" method="post">
{% csrf_token %}
Input Text:
<input type="text" name="param" required> <br><br>
{{data_external}}<br><br>
{{data}}
<br><br>
<input type="submit" value="Check for Service">
</form>
</container>
</center>
{% endblock %}
</body>
form.css file
form {
margin-top: 200px;
}
base.html
{%load static%}
<!DOCTYPE html>
<html>
<head>
<title>TweetyBird</title>
<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.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" type= "text/css" href="{% static 'css/main.css' %}" >
<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>
</head>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="/">TweetyBird</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarText">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="/search">Search by Tweet <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Twitter Bot</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">To be added</a>
</li>
</ul>
</div>
</nav>
{% block content %}
{% endblock %}
</body>
</html>
main.css
body
{
background-color: lightblue;
}
Add a block tag in your base.html ({%block staticfiles%}) just below your head tag.
Now in search.html add your css inside the staticfiles block.
Since you have extended base.html only the block content of search.html would be replaced with the content inside base.html's block
Since your link tag is outside the block hence that css would not even be picked up.
Also its better to use the body tag in base.html instead of search.html
I have developed my first web app in python Django framework, deployed in pythonanywhere.com web server.
I have already used the latest bootstrap in this app, but it is not responsive properly on a smartphone screen. responsive in laptop and tablet but not in a smartphone.
You can also check it in your phone "http://sandeepbhatt.pythonanywhere.com/".
please look into my base.html and index.html code, where is the problem, also please let me know if there are any details required to figure out this problem which is not mention in this post.
My base.html code:
<!DOCTYPE html>
{% load static %}
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<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.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
<title>PIV</title>
<!-- <link rel="stylesheet" href="{% static "css/index.css" %}"> -->
</head>
<body>
<!-- <style>
body{ background: url("{% static "images/background.jpg" %}"); background-size: cover; background-repeat: no-repeat;}
</style> -->
<!-- Navbar start from here -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<!-- <a class="navbar-brand" href="">Navbar</a> -->
<!-- Just an image -->
<nav class="navbar navbar-light bg-light">
<a class="navbar-brand" href="{% url 'index' %}">
<img src="{% static " images/logo.jpg" %}" width="70" height="50" alt="">
</a>
</nav>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
{% if user.is_authenticated %}
<li class="nav-item">
<a class="nav-link" href="{% url 'logout' %}">Logout</a>
</li>
{% else %}
<!-- <li class="nav-item">
<a class="nav-link" href="{% url 'survey_app:user_login'%}">Login</a>
</li> -->
{% endif %}
<li class="nav-item">
<a class="nav-link" href="{% url 'survey_app:analysis' %}">Analysis</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url 'survey_app:tracking' %}">Tracking</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url 'admin:index' %}">Admin</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url 'survey_app:register' %}">Register</a>
</li>
</ul>
</div>
</nav>
</body>
<div class="container">
{% block contant %}
{% endblock %}
</div>
<!-- footer -->
<div class="card text-center">
<div class="card-footer text-muted">
Powered By <small>Political India Venture</small>
©2019
</div>
</div>
</html>
My index.html code:
<!DOCTYPE html>
{% extends 'survey_app/base.html' %}
{% load static %}
{% block contant %}
<head>
<link rel="stylesheet" href="{% static " css/login_form.css" %}">
<!-- <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script> -->
</head>
<!-- <style>
body{ background: url("{% static "images/background.jpg" %}"); background-size: cover; background-repeat: no-repeat;}
</style> -->
<div class="row">
<div class="col">
<h2>Welcome to Political India Venture </h2>
<h2>Survey App!</h2>
<h5 class="font-italic<div class=" row">
<h5>Get the answers you need</h5>
<div class="wrapper">
<form method="POST" class="form-signin" action="{% url " survey_app:user_login" %}">
{% csrf_token %}
{# A more "HTML" way of creating the login form#}
<h2 class="form-signin-heading">Please login</h2>
<input type="text" class="form-control" name="username" placeholder="User Name" required="" autofocus="" />
<input type="password" class="form-control" name="password" placeholder="Password" required="" />
<label class="checkbox">
<input type="checkbox" value="remember-me" id="rememberMe" name="rememberMe"> Remember me
</label>
<button class="btn btn-lg btn-primary btn-block" type="submit">Login</button>
</form>
</div>
</div>
</div>
{% endblock %}
I found the solution after number of testing in my app and found there was only one bootstrap tag missing.
I just add this in my base.html file:
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
and now it is proper responsive on every device.
Your template is broken, look at <h5> class-"font-italic there is no closure (in index.html)