I am creating a couple pages for my website by extending a base.html template that I made. I want to be able to put bootstrap forms on some of the pages, but when I have the {% bootstrap_form formname %} tag inside the {% block content %} tag I get an error: Invalid block tag: 'bootstrap_form', expected 'endblock'.
Does anyone know how to put bootstrap tags inside of a template block??
My base.html:
<html>
<head>
<title>{% block title %}CYGNSS SIMPL{% endblock %}</title>
</head>
<body>
{% block content %}{% endblock %}
<div class="container">
<img class="img-responsive center-block" src="{% static "images/logo.png" %}" alt="Picture"/>
</div>
{% block footer %}{% endblock %}
</body>
</html>
My template:
{% extends "InterfaceApp/base.html" %}
{% block title %}Request Generator{% endblock %}
{% block content %}
<div class="container">
<div class="page-header">
<h1>
<p class="text-center">Such Request Generator</p>
</h1>
</div>
<div class="container-fluid">
<div class="panel panel-default">
<div class="panel-heading">
<p class="text-center">
Generate a Request.
</p>
</div>
<div class="container-fluid">
<form action="/InterfaceApp/Manual_Request/" method="post" class="form" onsubmit="return checkForm( this )">
{% csrf_token %}
<div class="panel-body text-center">
<table class="table-responsive centering">
<tbody>
<tr>
<td>
{% bootstrap_form form_length %}
</td>
</tr>
</tbody>
</table>
<br>
<table class="table-responsive centering">
<tbody>
<tr>
{% buttons %}
<td>
<button type="submit" class="btn btn-primary center-block" value="Submit">
{% bootstrap_icon "fire" %} Generate Manual Request
</button>
</td>
{% endbuttons %}
</tr>
</tbody>
</table>
</div>
</form>
</div>
</div>
</div>
</div>
{% endblock %}
Any help is much appreciated!
#AjayGupta answer worked for me. I did pip install django-bootstrap-toolkit, added 'bootstrap-toolkit to my INSTALLED_APS and then included {% load bootstrap_toolkit %} at the tope of my templates.
Related
my login form is not looking good, it's too wide. how to make it smaller and center in the middle of the page?
signin html:
{% extends "accounts/_base.html" %}
{% block title %}
Sign In
{% endblock %}
{% block control %}
<form class="form-signin" action="{% url 'login' %}" method="post">
{% csrf_token %}
<h2 class="form-signin-heading">Sign In</h2>
<div class="form-group">
<div class="fieldWrapper">
{{ form.username.errors }}
{{ form.username.label_tag }}
{{ form.username }}
</div>
<div class="fieldWrapper">
{{ form.password.errors }}
{{ form.password.label_tag }}
{{ form.password }}
</div>
</div>
<label for="signIn" class="sr-only">Click</label>
<button id="signIn" class="btn btn-lg btn-primary btn-block" >Sign In</button>
</form>
<form class="form-signin" action="{% url 'signup' %}">
<button id="signUp" class="btn btn-lg btn-default btn-block">Sign up now!</button>
</form>
{% endblock %}
base html:
<!DOCTYPE html>
<html lang='en'>
<head>
<meta CharacterSet='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>
{% load static %}
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#3.3.7/dist/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
<link rel="stylesheet" href="{% static 'css/style.css' %}">
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="{% static 'js/main.js' %}"></script>
{% block script %}{% endblock %}
</head>
<body>
<!-- head -->
<nav id="navbar" class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand mb-0" href="#">Pizza</a>
</div>
{% if user is not none %}
<div id="navbar-collapse" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
{% block nav_list %}{% endblock %}
</ul>
<form class="navbar-form navbar-right" action="{% url 'logout' %}" method="get">
<span>Welcome, {{ user }}. </span>
<button id="logout" class="btn btn-default btn-sm">Log out</button>
</form>
</div>
{% endif %}
</div>
</nav>
<!-- body -->
<div class="container" id="elem_cont">
{% if message is not none %}
<div class="alert alert-{{ message.0 }} alert-dismissable">{{ message.1 }}
<button type="button" class="close" data-dismiss="alert">×</button>
</div>
{% endif %}
{% block control %}
{% endblock %}
</div>
<div class="container" id="elem_disp">
{% block disp %}
{% endblock %}
</div>
<div class="container" id="elem_misc">
{% block misc %}
{% endblock %}
</div>
<!-- footer -->
<nav class="navbar navbar-fixed-bottom" id="nav_footer" role="navigation">
<div class="container" id="elem_foot">
<footer class="navbar" id="footer">
<hr>
{% block botm_cont %}
{% endblock %}
<p>© 2019 madlogos</p>
</footer>
</div>
</nav>
</body>
</html>
This is a styling issue for css.
You already have a css file referred to in your template (css/style.css), so you can add a style like the following to it. This will apply the style only to the form with the class form-signin:
form.form-signin {
max-width: 64ch;
margin: auto;
}
64ch is a good width for readability if there's a body of text, but you can tweak if it's not quite where you want the form on your page.
margin: auto will automatically handle the distances between the form and its containing div.
Don't forget to test at a variety of screen sizes. You may want to add a min-width value as well if you have other text on the page.
Please help me to resolve this issue:
my_image class in custom.css is not reflecting in the product.html file. I'm unable to resolve this issue. class="my_image" in product.html is not taking the alteration that I have provided in the custom.css
custom.css
.my_image{
width:100%;
height:auto;
padding:10px;
}
base.html
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="discription" content="{% block metadiscription %} {% endblock %}">
<link href="{% static 'css/bootstrap.min.css' %}" rel="stylesheet">
<link rel="stylesheet" href="{% static 'css/custom.css' %}">
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{% block title %} {% endblock %}</title>
</head>
<body>
<div class="container">
{% include 'header.html' %}
{% include 'navbar.html' %}
{% block content %}
{% endblock %}
{% include 'footer.html' %}
<script src="{% static 'js/popper.min.js' %}"></script>
<script src="{% static 'js/bootstrap.min.js' %}"></script>
</div>
</body>
</html>
catagory.html
{% extends 'base.html' %}
{% load static %}
{% block metadiscription %}
{% if catagory %}
{{catagory.description|truncatewords:155 }}
{% else %}
welcome
{% endif %}
{% endblock %}
{% block title %}
{% if catagory %}
{{catagory.name}}--ABC store
{% else %}
see our new collection
{% endif %}
{% endblock %}
{% block content %}
{% if catagory %}
<div>
<div class="row my_row_class">
<div class="mx_auto">
OUR PRODUCT COLLECTION
</div>
</div>
</div>
{% endif %}
<div>
{% if catagory %}
<img class="center" src="{{catagory.image.url}}" alt="{{catagory.name}}" height="200px">
</div>
<div>
<h1 class="text-center my_title">
{{catagory.name}}
</h1>
<p class="text-center text-justify">
{{catagory.description}}
</p>
</div>
{% else %}
<div>
<img class="my_image_padding" src="{% static 'img/banner.png' %}" height="300px" width="1300px">
</div>
<br>
<div>
<h1 class="text-center">OUR PRODUCT COLLECTION</h1>
<p class="text-justify"></p>
</div>
{% endif %}
<div class="container">
<div class="row mx_auto">
{% for product in products.object_list %}
<div class="my_bottom_margin col-12 col-sm-12 col-md-12 col-lg-4">
<div class="card text-center mb-3 shadow" style="min-width:18rem;">
<img class="card-img-top my_image" src="{{product.image.url}}"alt="image not found" height="100px">
<div class="card-body">
<h4>{{product.name}}</h4>
<p>{{product.price}}</p>
</div>
</div>
</div>
{% endfor %}
</div>
<div class="mx_auto">
{% if products.paginator.num_pages > 1 %}
<hr>
<div class="text-center">
{% for pg in products.paginator.page_range %}
{{pg}}
{% endfor %}
</div>
{% endif %}
</div>
<br>
</div>
{% endblock %}
product.html
{% extends 'base.html' %}
{% load static %}
{% block metadiscription %}
{{product.description|truncatewords:155 }}
{% endblock %}
{% block title %}
{{product.name}}--ABC store
{% endblock %}
{% block content %}
<div class="row my_product_row_class">
<div class="mx_auto">
<p> Home | {{product.catagory}}|{{product.name}}</p>
</div>
</div>
<br>
<div class="container">
<div class="row">
<div class="col-md-6 text-center">
<div>
<img class="my_image" src="{{product.image.url}}" alt="{{product.name}}">
</div>
</div>
<div class="col-md-6">
<div >
<h1 class="my_prod_title">{{product.name}}</h1>
<p>Rs {{product.price}}</p>
<p>Product description</p>
<p class="text-justify my_prod_text">{{product.description}}</p>
{% if product.stock <= 0 %}
<p class="text-justify my_prod_text"><b>OUT OF STOCK</b></p>
{% else %}
<a class="btn btn-secondary" href="">ADD TO CART</a>
{% endif %}
</div>
</div>
</div>
</div>
{% endblock %}
The problem is that you have other styles the override your custom style. Try adding the style directly in your HTML file above the element you want to affect and add the CSS !important rule to the properties.
Example
<style>
.my_image{
width:100%!important;
height:auto!important;
padding:10px!important;
}
</style>
<div class="my_image"></div>
This could be a specificity issue with your CSS, in that you may have other styles with a higher specificity overriding your custom styling.
Using the inspector tools in the browser would help you see if this is the issue - https://courses.cs.washington.edu/courses/cse154/19su/resources/assets/debugging/chrome-inspector.html
If this is the case, try making the "my_image" class more specific than the styles you are trying to overwrite:
HTML:
<div class="col-md-6 text-center my_image-wrapper">
<div>
<img class="my_image" src="{{product.image.url}}" alt="{{product.name}}">
</div>
</div>
CSS:
<style>
.my_image-wrapper .my_image{
width:100%!important;
height:auto!important;
padding:10px!important;
}
</style>
I've been able to add images to my post with ckeditor which is great but I can't seem to get the images to shrink and be responsive like the rest of the content/text in my post. I've tried a few tutorials and played around with things but nothing seems to work. Thanks.
Here is my BASE.HTML
{% load static %}
<!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.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="{% static 'portfolio_app/main.css' %}">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Davi Silveira DoP</title>
</head>
<body>
<main role="main">
{% if messages %}
{% for message in messages %}
<div class="alert alert-{{ message.tags }}">
{{ message }}
</div>
{% endfor %}
{% endif %}
{% block content %}{% endblock %}
</main>
<footer class="text-muted">
<div class="container">
<p class="float-right">
Back to top
</p>
<p class="text-muted">Davi Silveira © 2020</p>
<p>Associated with Silveira Brothers Films</p>
</div>
</footer>
<!-- 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+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>
BLOG.HTML
{% extends "portfolio_app/base.html" %}
{% block content %}
<div class="container">
<div class="row">
<div class="jumbotron content-section">
<small class="text-muted">
"Look at the natural light, when it's right and when it's beautiful. Don't mock with it, just use it as it is. If you must make any change, make it deliberately, make it delicately." -Douglas Kirkland
</small>
</div>
</div>
</div>
{% for post in posts %}
<div class="container">
<div class="col-md-12">
<article class="content-section">
<img class="rounded-square article-img" src="{{ post.author.profile.image.url }}">
<div class="body">
<div class="article-metadata">
<a class="mr-2" href="{% url 'user-posts' post.author.username %}">{{ post.author }}</a>
<small class="text-muted">{{ post.date_posted|date:'F d, Y' }}</small>
</div>
<h2><a class="article-title" href="{% url 'post-detail' post.id %}">{{ post.title|safe }}</a></h2>
<p class="article-content">{{ post.content|safe|truncatewords:30 }}</p>
</div>
</article>
</div>
</div>
{% endfor %}
<div class="container">
{% if is_paginated %}
{% if page_obj.has_previous %}
<a class="btn btn-outline-info mb-4" href="?page=1">First</a>
<a class="btn btn-outline-info mb-4" href="?page={{ page_obj.previous_page_number }}">Previous</a>
{% endif %}
{% for num in page_obj.paginator.page_range %}
{% if page_obj.number == num %}
<a class="btn btn-info mb-4" href="?page={{ num }}">{{ num }}</a>
{% elif num > page_obj.number|add:'-3' and num < page_obj.number|add:'3' %}
<a class="btn btn-outline-info mb-4" href="?page={{ num }}">{{ num }}</a>
{% endif %}
{% endfor %}
{% if page_obj.has_next %}
<a class="btn btn-outline-info mb-4" href="?page={{ page_obj.next_page_number }}">Next</a>
<a class="btn btn-outline-info mb-4" href="?page={{ page_obj.paginator.num_pages }}">Last</a>
{% endif %}
{% endif %}
</div>
{% endblock content %}
POST_DETAIL.HTML
{% extends "portfolio_app/base.html" %}
{% block content %}
<div class="py-5 bg-light">
<div class="container">
<div class="row">
<div class="col-md-12">
<article class="content-section">
<img class="rounded-circle article-img" src="{{ object.author.profile.image.url }}">
<div class="body">
<div class="article-metadata">
<a class="mr-2" href="{% url 'user-posts' object.author.username %}">{{ object.author }}</a>
<small class="text-muted">{{ object.date_posted|date:'F d, Y' }}</small>
{% if object.author == user %}
<div>
<a class="btn btn-secondary btn-sm mt-1 mb-1" href="{% url 'post-update' object.id %}">Update Post</a>
<a class="btn btn-danger btn-sm mt-1 mb-1" href="{% url 'post-delete' object.id %}">Delete Post</a>
</div>
{% endif %}
</div>
<h2 class="article-title">{{ object.title }}</h2>
<p class="article-content">{{ object.content }}</p>
</div>
</article>
</div>
</div>
</div>
</div>
{% endblock content %}
POST_FORM.HTML
{% extends "portfolio_app/base.html" %}
{% load crispy_forms_tags %}
{% block content %}
<div class="container col-md-6">
<div class="content-section">
<div class="content-section">
<form method="POST">
{% csrf_token %}
<fieldset class="form-group">
<legend class="border-bottom md-4">Blog Post</legend>
{{ form.media }}
{{ form|crispy }}
</fieldset>
<div class="form-group">
<button class="btn btn-outline-info" type="submit">Post!</button>
</div>
</form>
</div>
</div>
</div>
{% endblock content %}
What am I missing..? Thank you again for your help.
I have two pages that use base.html as a base template: index.html and login.html. login.html has a fully functional nav bar (links and :hover working) where index.html shows the nav bar but won't recognise the links.
Bear with me as this is my first post, so I have no idea what I need to provide etc...
base.html:
<!DOCTYPE html>
<html>
<head>
<title>{% block title %}Graduate Proofreading | Professional Essay
Proofreading{% endblock title %}</title>
{% block head_meta %}
{% block head_meta_charset %}
<meta charset="UTF-8">
{% endblock head_meta_charset %}
{% block head_meta_contentlanguage %}
<meta http-equiv="Content-Language" value="en-UK" />
{% endblock head_meta_contentlanguage %}
{% block head_meta_viewport %}
<meta name="viewport" content="width=device-width, initial-
scale=1">
{% endblock head_meta_viewport %}
{% endblock head_meta %}
{% block head_css %}
{% block head_css_site %}
<!--=================================CSS LINKS==========================================-->
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://www.w3schools.com/lib/w3-theme-cyan.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">
<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
<!-- Custom fonts for this template-->
<!-- Custom styles for this template-->
{% endblock head_css_site %}
{% block head_css_section %}
<style type="text/css">
</style>
{% endblock head_css_section %}
{% block head_css_page %}
{% endblock head_css_page %}
{% endblock head_css %}
</head>
<body>
<!-- Hidden Side Navigation -->
<nav class="w3-sidebar w3-bar-block w3-card w3-animate-left w3-
center " style="display:none" id="mySidebar">
<h1 class="w3-xxxlarge w3-text-theme">Side Navigation</h1>
Link 1
Link 2
Link 3
Link 4
<button class="w3-bar-item w3-button" onclick="w3_close()">Close <i class="fa fa-remove"></i></button>
</nav>
<!-- ====================================================
| MAIN NAV BAR |
========================================================
-->
<div class="w3-bar w3-left w3-dark-gray" style="width:100%;overflow:hidden;height:44px">
<button class="w3-bar-item w3-button w3-left" onclick="w3_open()" title="Sidebar"><i class="fas fa-bars fa-2x"></i></button>
<span id="nav-right-btn-margin" class="w3-bar-item w3-right" style="margin-right: 30px"> </span>
<a class="w3-bar-item w3-button w3-right w3-hide-small" href="{% url 'signup' %}" title="Sign Up" style="padding-top: 14px">SIGN UP</a>
<a class="w3-bar-item w3-button w3-right w3-hide-small" href="{% url 'login' %}" title="Login" style="padding-top: 14px">LOGIN</a>
<a class="w3-bar-item w3-button w3-right" href="#" title="#"></a>
<a class="w3-bar-item w3-button w3-right" href="#" title="#"></a>
</div>
{% block header %}
{% endblock header %}
{% block content %}
{% endblock content %}
{% block footer %}
<!-- Footer -->
<footer class="w3-container w3-dark-gray w3-padding-16">
<h3>Graduate Proofreading</h3>
<div style="position:relative;bottom:55px;" class="w3-tooltip w3-right">
<span class="w3-text w3-theme-light w3-padding">Go To Top</span>
<a class="w3-text-white" href="#myHeader"><span class="w3-xlarge">
<i class="fa fa-chevron-circle-up" style="color: #00aac1"></i></span></a>
</div>
<br>
<br>
<p>Website design and development by Luke Pilkington. For Full Stack Web Development, Visit www.lukepilkington.com</p>
</footer>
<script>
// Script for Sidebar etc
// Side navigation
function w3_open() {
var x = document.getElementById("mySidebar");
x.style.width = "100%";
x.style.fontSize = "40px";
x.style.paddingTop = "10%";
x.style.display = "block"
}
function w3_close() {
document.getElementById("mySidebar").style.display = "none";
}
</script>
{% endblock footer%}
</body>
</html>
index.html:
{% extends "base.html" %}
<title>{% block title %}Professional Essay Proofreading{% endblock title %}</title>
{% block head_css_section %}
<style type="text/css">
</style>
{% endblock head_css_section %}
{% block header %}
<header class="w3-display-container" id="myHeader">
<img src="/static/pics/office.jpeg" style="width:100%; padding: 0px; opacity: 0.5;">
<div class="w3-display-middle w3-container" style="text-align: center">
<h4>GRADUTEPROOFREADING.CO.UK</h4>
<h1 class="w3-xxxlarge w3-animate-bottom">QUALITY ESSAY PROOFREADING</h1>
<div class="w3-padding-32">
<button class="w3-btn w3-xlarge w3-hover-light-grey" style="background-color: #00aac1" onclick="#" style=";"><span style="color: black; font-weight:900">TRY FOR FREE TODAY</span></button>
</div>
</div>
</header>
{% endblock header %}
{% block content %}
<body>
<div class="w3-row-padding w3-center w3-margin-top">
<div class="w3-third">
<div class="w3-card w3-container" style="min-height:460px">
<h3>Quality Proofreaders</h3><br>
<i class="fab fa-jenkins fa-7x" style="color: #00aac1"></i>
<!--<i class="w3-xxxlarge material-icons">person</i>-->
<p>Native English Proofreaders Only</p>
<p>University Graduates, Always</p>
<p>Impeccable Attention To Detail</p>
<p>Fast Turnaround</p>
</div>
</div>
<div class="w3-third">
<div class="w3-card w3-container" style="min-height:460px">
<h3>Unbeatable Price</h3><br>
<i class="far fa-money-bill-alt fa-7x" style="color: #00aac1"></i>
<p>Simple and Affordable</p>
<p>Just 1.4p Per Word</p>
<p>Proofread Any Essay</p>
<p></p>
</div>
</div>
<div class="w3-third">
<div class="w3-card w3-container" style="min-height:460px">
<h3>Try Our Dissertation Service</h3><br>
<i class="fas fa-graduation-cap fa-7x" style="color: #00aac1"></i>
<p></p>
<p>English Lit./Lang. Graduates Only</p>
<p>Essay Writing Style Improvements</p>
<p>Formatting Correction</p>
<p>Just 1.6 Pence Per Word!</p>
</div>
</div>
</div>
<div></div>
</body>
{% endblock content %}
</html>
finally, login.html:
{% extends "base.html" %}
<title>{% block title %}Login | Graduate Proofreading{% endblock title %}</title>
{% block head_css_section %}
<style type="text/css">
#media (max-width: 600px) {
input[type=text], input[type=password] {
width: 90%;
margin-top: 0;
}
#logincontainer {
}
</style>
{% endblock head_css_section %}
{% block header %}
<header class="w3-padding">
<i onclick="w3_open()" class="fa fa-bars w3-xlarge w3-button w3-theme"></i>
<div class="w3-center" style="padding-top: 50px">
<h4></h4>
<h1 class="w3-xxxlarge w3-animate-bottom"></h1>
<div class="w3-padding-32">
<!-- <button class="w3-btn w3-xlarge w3-dark-grey w3-hover-light-grey" onclick="#" style="font-weight:900;">TRY FOR FREE TODAY</button>
-->
</div>
</div>
</header>
{% endblock header %}
{% block content %}
<body class="w3-theme">
<div class="w3-card w3-display-middle w3-round" style="width: 60%; max-width:600px" id="logincontainer">
<div class="w3-container w3-dark-gray">
<form class="form-signin" action="#">
<h2 class="form-signin-heading">Login</h2>
</div>
<div class="w3-container w3-light-gray w3-padding-32" style="width:100%";>
<div>Username</div>
<input type="text" class="form-control" name="username" placeholder="Username/Email Address" required="" autofocus="" />
<div></div>
<div style="padding-right:6px">Password</div>
<input type="password" class="form-control" name="password" placeholder="Password" required=""/>
<label class="checkbox">
<div></div>
<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 class="w3-container w3-dark-gray" style="height:3em"></div>
</div>
</body>
{% endblock content %}
{% block footer %}
{% endblock footer %}
Please let me know if you need any other info. Thanks!
Make a new file for navbar and just
{%include 'navbar.html'%}
It should solve the problem and it should be easier
Try doing the following
<nav class="w3-sidebar w3-bar-block w3-card w3-animate-left w3-
center navbar-collapse collapse" style="display:none" id="mySidebar">
<h1 class="w3-xxxlarge w3-text-theme">Side Navigation</h1>
Link 1
Link 2
Link 3
Link 4
<button class="w3-bar-item w3-button" onclick="w3_close()">Close <i class="fa fa-remove"></i></button>
</nav>
Ok, I finally worked it out, it's not a Django issue at all, it's just that the w3.CSS class ".w3-display-container" invisibly covers up the nav bar above it for some reason.
index.html:
...
{% block header %}
<header class="w3-display-container" id="myHeader">
...
Padding the actual element ( in this example) didn't work. The only solution I could come up with was a rather inelegant one. I added a div above the element and padded it equal to the height of the nav bar.
<div style="padding-bottom: 44px";>
</div>
<div class="w3-display-container" id="myHeader">
https://www.w3schools.com/w3css/w3css_display.asp
Didn't tell me anything useful, but there's the link in case anyone wanted to do some digging.
How can I fix this problem without removing the bootstrap template tags?
Context:
I have the following template schema:
layout.html is my base template
And I have another templates which inherit from layout.html
I am using third party package application django-bootstrap3
My layout.html is:
(The divs amount of navbar and django variables templates does not matter - are just for demonstration)
{% load staticfiles %}
{% load bootstrap3 %}
{% bootstrap_css %}
{% bootstrap_javascript %}
<html lang="es">
{% block head %}
<head>
<title>{% block title_tag %}My APP{% endblock %}</title>
<link rel="stylesheet" href="{% static 'css/main.css' %}">
</head>
{% endblock %}
<body>
<div class="wrapper">
<!-- Nav menu -->
<header>
{% if request.user.is_authenticated %}
{% if userprofile %}
<div class="profile-options">
{% comment %} Begin settings drowdown {% endcomment %}
<div class="name-options-cont">
<div class="name">
<p>{{ userprofile.user.email }} - {{ userprofile.user.enterprise_name }}</p>
</div>
<div class="options">
<div class="drop-down">
<ul>
<li><a href="{% url 'some-url' %}" >Some option</a></li>
<li><a href="{% url 'some-url2' %}" >Some option2</a></li>
<li>Exit</li>
</ul>
</div>
</div>
</div>
</div>
{% endif %}
{% else %}
<div class="registration">
RegistrarseIniciar sesión
</div>
{% endif %}
</header>
<div class="container">
{% if messages %}
{% for message in messages %}
<div class='alert {% if "success" in message.tags %}alert-success{% elif "warning" in message.tags%}alert-
warning{% elif "error" in message.tags %}alert-danger{% endif %} alert-dismissible' role='alert'>
<!-- Boton para cerrar el alert-->
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<!--End Boton para cerrar el alert
Haciendo uso del Django messages framework-->
{% if "safe" in message.tags %}{{ message|safe }}{%else%}{{ message }}{% endif %}
</div>
{% endfor %}
{% endif %}
</div>
{% block body_content %}
{% endblock body_content %}
</div>
<footer>
</footer>
</body>
</html>
My article_detail.html template inherits from layout.html.
In this template I am retrieving an object information in Django, and rendering the specific information of an article post.
In the layout.html the divs amount and django variables templates does not matter - are just for demonstration
{% extends "layout.html" %}
{% load bootstrap3 %}
{% load staticfiles %}
{% block body_content %}
<!-- Right column -->
<div class="search-column">
<div class="post-column">
<div class="info">
<div class="icon">
<img src="{% static 'img/icons/info.svg' %}" alt="">
<span>Información</span>
</div>
<div class="autor">
<p class="title">Autor</p>
<div class="profile">
<div class="img-cont">
<a href="#">
{% if instance.author.avatar%}
<img src="{{ instance.author.avatar.url }}" alt="">
{% else %}
<img src="{% static 'img/default_profile_pic.png' %}" class="img-responsive">
{% endif %}
</a>
</div>
<div class="name-review-cont">
{% comment %} A quien corresponda {% endcomment %}
<a href="#">
{% if instance.author.get_long_name %}
<span>{{ instance.author.get_long_name }}</span>
{% endif %}
{% if instance.author.get_enterprise_name %}
<span>{{ instance.author.get_enterprise_name }} (#{{ instance.author.email }})</span>
{% endif %}
</a>
<p><div class="fb-like" data-href="{{ request.build_absolute_uri }" data-layout="standard"
data-action="like" data-size="small" data-show-faces="true" data-share="true"></div>
</p>
<hr/>
{% comment %}
<img src="{% static 'img/stars.svg' %}" alt="">
<div class="average">
<span>546</span>
<span>valoraciones</span>
</div>
{% endcomment %}
</div>
</div>
</div>
</div>
</div>
</div>
<!-- End right column-->
<!-- Main content -->
<main>
<div class="blog-body">
{% if instance.image %}
<img src="{{ instance.image.url }}" class="img-responsive">
{% endif %}
<div class="title-cont">
<h1>{{ title }} <small>{% if instance.draft %}<span style='color: red'> Borrador</span> {% endif %}{{ instance.publish }}</small> </h1>
{% comment %}
{% if instance.author.has_perm %}
{{ instance.author.has_perm }}
{% endif %}
{% endcomment %}
{% comment %} <h1>{{ title }} <small>{{ instance.timestamp|timesince }}</small> </h1>{% endcomment %}
</div>
<div class="main-text">
{{ instance.content|linebreaks }}<br/>
</div>
</div>
</main>
<!-- End main content -->
{% endblock %}
When I go to the article detail view via browser, I found at design level of following:
I have been checking in Inspect elements and I think (I don't know if I am in right) that there is a <div class="container"> .. </div> element which override this visual space in blank:
I think this in relation that if will does not this <div class="container"> .. </div> element my blue section code, would be located properly and not so far down the page.
This <div class="container"> .. </div> element is brought by django-bootstrap3 which I am using, such as follow in the following picture:
If I go to my layout.html template mentioned previously above, and I remove the following template tags bootstrap related:
{% load bootstrap3 %}
{% bootstrap_css %}
{% bootstrap_javascript %}
and refresh my article_detail.html in the browser, the visual space blank is fixed