Django Bootstrap 5

26.2 · active · verified Thu Apr 16

django-bootstrap5 is a Django app that provides Bootstrap 5 integration for Django projects, offering a collection of template tags and filters to seamlessly blend Django forms, messages, and other components with Bootstrap 5. It is actively maintained and considered production-ready, with frequent releases to keep up with Bootstrap and Django updates.

Common errors

```
ModuleNotFoundError: No module named 'bootstrap5'
```
cause The Django app was either not installed, not added to INSTALLED_APPS, or was added with the incorrect name (`bootstrap5` instead of `django_bootstrap5`).

fix Ensure `pip install django-bootstrap5` was run, and verify `INSTALLED_APPS` in `settings.py` contains `'django_bootstrap5'`.
```
My forms/pages are not styled by Bootstrap, or styling is broken.
```
cause The Bootstrap CSS and/or JavaScript files are not being loaded in your template, or the template tags are not loaded correctly.

fix Verify that `{% load django_bootstrap5 %}` is at the top of your template, and `{% bootstrap_css %}` is in the `<head>` section, and `{% bootstrap_javascript %}` is placed before the closing `</body>` tag. Also check `STATIC_URL` is configured if you're serving static files directly.
```
TemplateSyntaxError: 'bootstrap5' is not a registered tag library
```
cause You are attempting to load a tag library named `bootstrap5`, which belongs to a different package (`django-bootstrap-v5`), while having `django-bootstrap5` installed.

fix Change `{% load bootstrap5 %}` to `{% load django_bootstrap5 %}` in your templates. If you intended to use `django-bootstrap-v5`, ensure it is installed and configured correctly instead.

Warnings

breaking When migrating from `django-bootstrap4`, you must update all references from `bootstrap4` to `django_bootstrap5`. This includes `INSTALLED_APPS`, `{% load ... %}` tags in templates, and any template inheritance.
Fix: Replace `bootstrap4` with `django_bootstrap5` in `settings.py` (INSTALLED_APPS), template `{% load %}` statements, and `{% extends %}` statements.
breaking Bootstrap 5 explicitly dropped jQuery support, and consequently, `django-bootstrap5` has removed all jQuery-related functions and tags. If your project still relies on jQuery for other purposes, you must include it manually; `{% bootstrap_javascript %}` will no longer provide it.
Fix: Manually add jQuery `<script>` tags to your templates if your project requires jQuery.
gotcha There is a separate, often less maintained, package called `django-bootstrap-v5` which uses `bootstrap5` as its `INSTALLED_APPS` entry and template tag load name. Ensure you are consistently using `django-bootstrap5` and its corresponding `django_bootstrap5` names to avoid conflicts and unexpected behavior.
Fix: Always use `django_bootstrap5` in `INSTALLED_APPS` and `{% load django_bootstrap5 %}` for this library. If switching, fully remove the other package and its references.
gotcha Some template tags and settings from older `django-bootstrap` versions (e.g., `bootstrap4`) may have been removed or renamed in `django-bootstrap5` due to Bootstrap 5 API changes. Examples include removal of `InlineFieldRenderer` and simplification of size parameters.
Fix: Consult the migration guide in the official documentation for a comprehensive list of changes. Update your templates and settings accordingly.

Install

pip install django-bootstrap5 Install stable version

Imports

django_bootstrap5
wrong:
```
INSTALLED_APPS = (
    # ...
    "bootstrap5",
    # ...
)
```
correct:
```
INSTALLED_APPS = (
    # ...
    "django_bootstrap5",
    # ...
)
```
The correct app name for `django-bootstrap5` in `INSTALLED_APPS` is `django_bootstrap5`. Using `bootstrap5` is a common mistake, often due to confusion with the older `django-bootstrap-v5` package.
load django_bootstrap5
wrong:
```
{% load bootstrap5 %}
```
correct:
```
{% load django_bootstrap5 %}
```
When loading template tags, use `{% load django_bootstrap5 %}`. `{% load bootstrap5 %}` refers to a different, potentially unmaintained, package or an older version.

Quickstart

After installation, add `django_bootstrap5` to your `INSTALLED_APPS`. In your Django templates, load the `django_bootstrap5` library using `{% load django_bootstrap5 %}`. Include `{% bootstrap_css %}` in your `<head>` and `{% bootstrap_javascript %}` before the closing `</body>` tag to load Bootstrap's CSS and JS. You can then use template tags like `{% bootstrap_form form %}` to render forms easily.

# settings.py
INSTALLED_APPS = [
    # ...
    'django.contrib.staticfiles',
    'django_bootstrap5',
    # ...
]

# myapp/templates/myapp/base.html (or any template using Bootstrap)
{% load django_bootstrap5 %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Django App</title>
    {% bootstrap_css %}
</head>
<body>
    <div class="container">
        <h1>Hello Bootstrap 5!</h1>
        <form method="post" class="form">
            {% csrf_token %}
            {% bootstrap_form form %}
            {% bootstrap_button button_type="submit" content="Submit" %}
        </form>
    </div>
    {% bootstrap_javascript %}
</body>
</html>

view raw JSON →