I have a problem with bootstrap drop-down menus.
I have this basic template:
{% extends 'damage/base.html' %}
{% block body %}
<script src="{% static 'damage/bootstrap-4.1.1-dist/js/bootstrap.min.js' %}"></script>
<script src="{% static 'damage\gijgo-combined-1.9.6\js\gijgo.min.js' %}" type="text/javascript"></script>
<script src="{% static 'damage\gijgo-combined-1.9.6\js\messages\messages.el-el.js' %}" type="text/javascript"></script>
<link href="{% static 'damage\gijgo-combined-1.9.6\css\gijgo.min.css' %}" rel="stylesheet" type="text/css" />
<script src="{% static 'js\moment.js' %}" type="text/javascript"></script>
<div class="container">
...
<div class="col-3" align="right">
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
style="color: white; width: 300px">
Επιλογή Περιόδου Ημερομηνιών
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton" id="dateselected">
<li><a class="dropdown-item" style="color: #062c33; width: 300px">Σήμερα</a></li>
<li><a class="dropdown-item" href="#" style="color: #8a6d3b;">Τελευταία Εβδομάδα</a></li>
<li><a class="dropdown-item" href="#" style="color: #721c24;">15-ήμερο</a></li>
<li><a class="dropdown-item" href="#" style="color: #002a80;">Μήνας</a></li>
<li><a class="dropdown-item" href="#" style="color: #a41515;">3-μηνο</a></li>
<li><a class="dropdown-item" href="#" style="color: #333333;">6-Μηνο</a></li>
<li><a class="dropdown-item" href="#" style="color: #721c24;">Ετος</a></li>
</ul>
</div>
</div>
</div>
....
<script type="text/javascript" src="{% static 'js\criteria_dates.js' %}" ></script>
</form>
</div>
{% endblock %}
which extends the base template:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>{% block title %} DEYA DEMO {% endblock %}</title>
<!-- Loads the static files -->
{% load staticfiles %}
<!--<link rel="stylesheet" href="{% static 'damage/bootstrap-3.3.6-dist/css/bootstrap.min.css' %}" >-->
<link rel="stylesheet" href="{% static 'damage/bootstrap-4.1.1-dist/css/bootstrap.min.css' %}" >
<link href="https://fonts.googleapis.com/css?family=Satisfy" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="{% static 'damage/style.css' %}"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="{% static 'damage/bootstrap-4.1.1-dist/js/bootstrap.min.js' %}"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<link rel="stylesheet" href="{% static 'damage/font-awesome-4.7.0/css/font-awesome.min.css' %}" >
</head>
<body >
{% include 'damage/menus/navmenu.html' %}
{% block body %}
{% endblock %}
</body>
whitch includes this navigation menu:
<div class="collapse navbar-collapse" id="#collapsenavbar">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-item nav-link " href="{% url 'index' %}">Αρχική<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item link">
<a class="nav-item nav-link" href="{% url 'damage-add' %}">Νέα Βλάβη</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Aναφορές
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="{% url 'damage-list-criteria' %}">Λίστα Βλαβών</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</li>
<li>
<a class="nav-item nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
All these work fine, except for the drop down menus.
The problem is when I put the bootstrap.min.js on the basic template then drop down menu on nav-menu (id="navbarDropdownMenuLink") doesn't work but works the drop down on basic template (id="dropdownMenuButton")
When I remove the bootstrap.min.js from the basic template then drop-down on drop down works the opposite.
Related
I am trying to apply bootstrap in my shared html file in a Django project and the dropdown list just won't work I tried everything I could cdn local bootstrap and when I click the dropdown list nothing happens.
Below is the template file:
{% load static %}
<!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">
<link rel="stylesheet" type="text/css" href="{% static 'css/bootstrap.min.css' %}">
<title> {% block title %}{% endblock %} </title>
</head>
<body>
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
<a class="navbar-brand" href="{% url 'home' %}">Home</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 ms-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 'upload'%}">Upload</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="{% url 'logout' %}">
Log Out</a>
</div>
</li>
</ul>
{% else %}
<form class="form-inline ms-auto">
<a href="{% url 'login' %}" class="btn btn-outline-secondary">
Log In</a>
<a href="{% url 'signup' %}" class="btn btn-primary ms-2">
Sign up</a>
</form>
{% endif %}
</div>
</nav>
<div class="container">
{% block content %}
{% endblock content %}
</div>
<script src="{% static 'js/bootstrap.bundle.js'%}"></script>
<script src="{% static 'js/bootstrap.bundle.min.js' %}"></script>
<script type="text/javascript" src="{% static 'js/bootstrap.min.js' %}"></script>
</body>
</html>
Use data-bs-toggle='dropdown', refer from boostrap 5.0 docs and make sure that the user is authenticated.
Try this template code:
{% if user.is_authenticated %}
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link dropdown-toggle" href="#" id="userMenu"
data-bs-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="#">Upload</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">
Log Out</a>
</div>
</li>
</ul>
{% else %}
<form class="form-inline ms-auto">
<a href="#" class="btn btn-outline-secondary text-white">
Log In</a>
<a href="#" class="btn btn-primary ms-2 text-white">
Sign up</a>
</form>
{% endif %}
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)