django_bootstrap5 not formatting anything

Question

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.

Also we normally use `{% load bootstrap5 %}` (without the `django_` prefix) but I don't know if they are aliases. `bootstrap5` is also what the docs use: https://django-bootstrap-v5.readthedocs.io/en/latest/quickstart.html — tdy, Jan 22 '23 at 05:47
@tdy I think you're referencing `django_bootstrap-v5`, whereas I'm using `django_bootstrap5`. I did add django_bootstrap5 to the `installed_apps`, and the syntax is `{% load django_bootstrap5 %}`. I also tried `{% load bootstrap5 %}` and got an error, which is how I eventually figured out they were different packages. — BLimitless, Jan 22 '23 at 06:09
I see. However it looks like your package works the same way. I just ran [official example app from `django_bootstrap5`](https://github.com/zostera/django-bootstrap5/tree/main/example) and verified that none of their templates include cdn links, but the rendered pages include cdn links. — tdy, Jan 22 '23 at 22:47
Are you running script blockers? Double check the browser console to see if the jsdelivr links are getting blocked. — tdy, Jan 22 '23 at 22:51
Thanks @tdy. I did the same thing: looked at the example and saw it didn't have cdn links, but the rendered pages do. For now I'm just including the cdn links and calling it (enough) of a win: they're not getting blocked and I can format a whole form with the single template tag of `{% bootstrap_form form %}`, so for now this is enough functionality. Thank you for the help! — BLimitless, Jan 23 '23 at 00:09

BLimitless · Accepted Answer · 2023-01-25T06:55:19.500

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.

That issue actually shows that `django_bootstrap5` does include the bootstrap distribution already, so you shouldn't install `bootstrap` separately. You can see from the `core.py` file that the CDN links are included. — tdy, Jan 25 '23 at 02:05
Based on their [`bootstrap5.html`](https://github.com/zostera/django-bootstrap5/blob/main/src/django_bootstrap5/templates/django_bootstrap5/bootstrap5.html) template, it looks like you just need to include `{% bootstrap_css %}` and `{% bootstrap_javascript %}` in your base template (assuming you don't `extend` this `bootstrap5.html` file like their example app does). — tdy, Jan 25 '23 at 02:05

django_bootstrap5 not formatting anything

1 Answers1