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.