Django_bootstrap5 not formatting anything

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? Thank you.

It looks like you've correctly loaded the django_bootstrap5 template tag library in both your base template and your child templates. However, it seems that you're missing the Bootstrap CSS and JavaScript files that provide the actual styling and functionality.

Make sure you have the Bootstrap CSS and JavaScript files included in your HTML, either by linking to a CDN or by including them in your static files. You can also include them in your base.html template, so you don't have to include them on every page.

It should look something like this in your base.html:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>

You also need to make sure that you're including the bootstrap_form template tag in the correct place. You have it inside the tag, but it should be outside of it, like this:

<form method="POST">
    {% csrf_token %}
    {% bootstrap_form form %}
    <input type="submit" value="Sign Up" class="btn btn-default">
</form>

Tracked it down in the source code: for use of the django_bootstrap5 package you are supposed to include bootstrap via cdn or by downloading the local files to static, in addition to installing the django_bootstrap5 package.

I caught it in a resolved issue on github here, here's the relevant line:

Hi, Just a tiny error on the core.py file that I forgot to fix on loading the app in a new environment, the final 's' is missing on line 13:

        "url": "https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.j",
Rather than:

        "url": "https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js",
Easy enough to fix but thought it might be handy to prevent any panic moments!

In conclusion, install bootstrap as well as django_bootstrap5!

Back to Top