I'm trying to get basic bootstrap formatting working in a django app, and installed django_bootstrap5 to do so. No formatting, however, is getting applied to any of the pages.
Here's the various pages:
base.html:
<!DOCTYPE html>
{% load django_bootstrap5 %}
<html lang="en">
<head>
<meta charset="UTF-8">
<title>
{% block title %}
{% endblock %}
</title>
</head>
<body>
<div class="container">
{% block body %}
{% endblock %}
</div>
</body>
</html>
I extend this in a simple index page:
<!DOCTYPE html>
{% extends 'base.html' %}
{% load django_bootstrap5 %}
{% block title %}
Home
{% endblock %}
{% block body %}
<h1>Hello World</h1>
{% endblock %}
Hello World, however, is not showing up in a container.
This is also failing on a form page:
<!DOCTYPE html>
{% extends 'base.html' %}
{% load django_bootstrap5 %}
{% block body %}
<div class="container">
<h1>Sign Up</h1>
<form method="POST">
{% csrf_token %}
{% bootstrap_form form %}
<input type="submit" value="Sign Up" class="btn btn-default">
</form>
</div>
{% endblock %}
The form is neither in a bootstrap container, nor does it have any styling at all. What am I missing here? Do you need to also load the bootstrap files by cdn or download them and add them to static when using django_bootstrap5? That makes things work, but it seems like it defeats the purpose of installing via pip. Thank you.
Thank you #tdy for tracking this down in the source code on github: one is not supposed to install bootstrap via cdn or by downloading the local files. Those are already included. Instead the preferred way to link is to include the {% boostrap_css %} and {% bootstrap_javascript %} tags. Thus your base.html file should look something like:
<!DOCTYPE html>
{% load django_bootstrap5 %}
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
{% bootstrap_css %}
</head>
<body>
<!-- Content -->
<!-- Bootstrap JavaScript -->
{% bootstrap_javascript %}
</body>
As an additional note, even if one did have to install bootstrap via cdn or local files in addition to the django_bootstrap5 package, this still wouldn't defeat the point of the package: django_bootstrap5 makes it easy to integrate bootstrap into django, that's the main point. You can format an entire form in a single line using django_bootstrap5:
<form id="postForm" action="{% url 'posts:create' %}" method="POST">
{% csrf_token %}
{% bootstrap_form form %} # this one line does a TON of work.
<input class="btn btn-primary btn-large" type="submit" value="Post">
</form>
The django_bootstrap5 package also makes it easy to install bootstrap.
Thank you all, especially #tdy for the support, and happy django-ing.
Related
I have error in my template when I try to use inheritance block
Everything works before I convert the login.html into html, which is basically everything from base.html
My html files are as below：
base.html :
<!DOCTYPE html>
<html>
<head>
{% block head %}
<title> {% block title %} {% endblock %} | Company Name</title>
{% endblock %}
</head>
<body>
{% block body}
{% endblock %}
</body>
</html>
login.html :
{% extends "base.html" %}
{% block title %}Login{% endblock %}
{% block body %}
<form method="POST">
<label for="name_question">What is your name? <br>
<input type="text" name="name"> <br>
<input type="submit" name="submit" value="Submit"> <br>
</form>
{% if name %}
<h1>Hello, {{name}}!</h1>
{% endif %}
{% endblock body %}
Nothing seems wrong with what you are trying to do. This could likely be caused due to a number of other reasons, mainly any of the followings:
I think that the reference to the base template is relative to you
TEMPLATE_DIR. Try different things like putting both templates at the
same level etc.
Check all the tags in both templates to be sure that they are all
correctly formatted
Check the encoding of the files. If it is UTF-8, try to disable the
BOM in both files.
Maybe it is a problem with your directory setting. Try to hard code
the absolute path to check that
My guess would be the final point.
Hello I am using modelforms . One of my entries is a ChoiceField, when I have my CSS header in the name.html file (the html file for the form page) the page does not show the drop downs. When I remove this header in name.html the drop downs show. Can anyone explain what is happening?
name.html
{% extends 'fitness/header.html' %}
{% block content %}
<form method="post">
{% csrf_token %}
{{form.as_p}}
<input type="submit" value="Submit">
</form>
{% endblock %}
header.html
<head>
{% load static %}
<!-- Prism CSS -->
<link href="{% static "tinymce/css/prism.css" %}" rel="stylesheet">
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</head>
<body>
<nav>
<div class="nav-wrapper">
Gainz.com <!–– Need to adjust this logo ––>
<ul id="nav-mobile" class="right
hide-on-med-and-down">
{% if user.is_authenticated %}
<li>profile</li>
<li>logout</li>
<li>dashboard</li>
<li>feed</li>
<li>forum</li>
<li>manual entry</li>
{% else %}
<li>Home</li>
<li>feed</li>
<li>login</li>
<li>register</li>
{% endif %}
</ul>
</div>
</nav>
{% block content %}
{% endblock %}
</body>
<!-- Prism JS -->
<script src="{% static "tinymce/js/prism.js" %}"></script>
Make sure to add this to the top of the page:
<!DOCTYPE HTML> //always include this at the top of the page of your base file
<html>
Scripts always go on the bottom of the page before the closing </body> tag:
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script src="{% static "tinymce/js/prism.js" %}"></script>
</body>
</html>
This is generally rendered with with a footer.html template using {% include 'footer.html' %}
I added the <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> jquery script because it looks like the cloudfare materialize script requires it (although I'm not sure). Regardless, you should be using jQuery on all your html files! ;-)
Also, I'm not sure if this will fix your problem or not, but its generally good practice to make sure all of your elements have closing tags (if they require them). There might be a random <div> tag on your name.html (or somewhere else) that is causing unexpected errors.
In order to help me get some experience with CSS, HTML and Bootstrap I made a super quick blog with Pelican and I am trying to make my own template. I started with a few lorum posts just to have something.
Following multiple tutorials and reading for the last several hours, I created a theme directory in my project and placed a template directory in that.
I created a very simple base.html and index.html in the template directory.
base.html
<!doctype html>
<html>
<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://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<title>{% block title %}{% endblock %}</title>
</head>
<body>
<h2>This is my base template</h2>
<div class="container">
{% block content %}{% endblock %}
</div>
</body>
</html>
and index.html
{% extends "base.html" %}
{% block title %}{{ SITENAME }}{% endblock %}
{% block content %}
<h1>{{ SITENAME }}</h1>
{% for article in articles %}
<h2>{{ article.title }}</h2>
<label>Posted on <strong>{{ article.date }}</strong></label>
{{ article.content|truncate(110) }}
{% else %}
No posts yet!
{% endfor %}
{% endblock %}
I set THEME = 'theme' in pelicanconf.py. I have tried generating my site with make html and with pelican content -s pelicanconf.py -t theme but it just won't generate using my base.html and index.html files.
I got an error:
TemplateSyntaxError at /accounts/profile/
<ExtendsNode: extends "registration/accounts/base.html"> must be the first tag in the template
I wrote base.html:
{% load staticfiles %}
<html lang="ja">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="{% load staticfiles 'bootflat/css/bootflat.min.css' %}">
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
</head>
<body>
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<p class="navbar-text">HELLO</p>
{% if user.is_authenticated %}
<p class="navbar-text">{{ user.get_username }}</p>
{% endif %}
</div>
</nav>
<div class="container">
{% block content %}
{% endblock %}
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="{% static 'bootstrap/js/bootstrap.min.js' %}"></script>
</body>
</html>
profile.html is:
{% load staticfiles %}
{% extends "registration/accounts/base.html" %}
{% block content %}
<html lang="ja">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="{% static 'bootflat/css/bootflat.min.css' %}">
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
</head>
<body>
SEE YOUR PHOTO
<div class="container">
<form action="{% url 'accounts:upload_save' %}" method="POST" enctype="multipart/form-data">
{% csrf_token %}
<p>SEND PHOTO</p>
<input type="file" name="files[]" multiple>
<input type="hidden" value="{{ p_id }}" name="p_id">
<input type="submit" value="Upload">
</form>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</body>
</html>
{% endblock %}
I found only base.html was showed accurately, but when I tried base.html inherit profile.html,this error happens. Before,these 2 files are loaded accurately, but when I added href="{% static 'bootflat/css/bootflat.min.css' %}" to profile.html,this error happpens. Why does such an error happen? How can I fix this? I think adding {% load staticfiles %} is right to profile.html,but is it wrong?
You should consider your base.html file as a layout and your profile.html as a template file rendered inside this layout.
For this reason:
load staticfiles block should be inserted in base.html and should be insert in every file where you are loading static assets (see next bullet point)
when you refer to static assets inside src= is enough to load it with static path helper
profile.html should extend the layout base.html and whatever is included in the {% block content %} will be rendered inside the block content tag in your body
base.html
<html lang="ja">
<head>
<meta charset="utf-8">
{% load staticfiles %}
<link rel="stylesheet" href="{% static 'bootflat/css/bootflat.min.css' %}">
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
</head>
<body>
{% block content %}
<!-- your body is fine -->
{% end block %}
</body>
</html>
profile.html
{% extends "registration/accounts/base.html" %}
{% block content %}
SEE YOUR PHOTO
<form action="{% url 'accounts:upload_save' %}" method="POST" enctype="multipart/form-data">
{% csrf_token %}
<p>SEND PHOTO</p>
<input type="file" name="files[]" multiple>
<input type="hidden" value="{{ p_id }}" name="p_id">
<input type="submit" value="Upload">
</form>
{% endblock %}
Edit
as remarked by Daniel Roseman
The error says that you must write extends tag first in your template.
You can read more about this in documentation
So, you should write {% extends "registration/accounts/base.html" %} first in profile.html
{% extends "registration/accounts/base.html" %}
{% load staticfiles %}
{% block content %}
...
{% endblock %}
After that all will works fine!
I am a beginner in python and django programming, i have a question that already have been asked in stackoverflow and many forums, but i couldnt solve my own.
this exactly my situation:
this the code in my app html page:
{% extends 'base.html' %}
{% block content %}
<form method="POST" action=""> {% csrf_token %}
{{ form.as_p }}
<footer>
<button type="submit" class="button">Confirmer</button>
</footer>
</form>
{% endblock %}
but in my base.html i have already this form and this classes:
<form action="" class="sky-form">
<section>
<label class="input">
<input type="password" placeholder="Confirmation">
<b class="tooltip tooltip-bottom-right">Retaper votre mot de passe</b>
</label>
</section>
.
.
.
.
</form>
where should i put {% block content %} and {% endblock %} in my base.html!!!!!!
i've also followed the tutorial from the official docs, but it did,'t work out for me
i'm sorry if my question seem silly!
Thanks in advance.
Don't put the form in your base.html.
In your base.html you should have something like this.
<!DOCTYPE html>
<html lang="en">
<head>
...put your css and metatags here....
</head>
<body>
{% block content %}
{% endblock %}
</body>
Then in your app html templates you just include.
{% extends 'base.html' %}
{% block content %}
..... Place form code here!.....
{% endblock %}
Now whenever you want to display code in the body of your html you can just use {% block content %} and not have to re-write the base.html code over and over! Just as the code says you are extending the base template.
Hope this helps! Let me know if you have any other questions.