Bootstrap 4 for Django

26.1 · maintenance · verified Thu Apr 16

django-bootstrap4 seamlessly integrates Bootstrap 4 into Django projects, providing template tags and filters for easy rendering of Bootstrap components. As of version 26.1, the library is in maintenance mode, receiving only bug fixes and security updates. This is due to Bootstrap 4 being superseded by Bootstrap 5, and new projects are encouraged to use the dedicated `django-bootstrap5` package.

Common errors

```
TemplateSyntaxError: 'bootstrap4' is not a registered tag library
```
cause The 'bootstrap4' app is not added to Django's INSTALLED_APPS.

fix Add `'bootstrap4'` to the `INSTALLED_APPS` list in your `settings.py` file.
```
Bootstrap styles (CSS) are not applying, or JavaScript components are not working (e.g., dropdowns, modals)
```
cause Bootstrap CSS/JS files are not correctly loaded in the template, or JavaScript dependencies (like jQuery, Popper.js) are missing/loaded in the wrong order.

fix Ensure `{% bootstrap_css %}` is in your `<head>` and `{% bootstrap_javascript %}` is placed just before the closing `</body>` tag in your base template. Check your browser's developer console for any loading errors or JavaScript conflicts.
```
My forms are not rendering with Bootstrap styling even after loading bootstrap4 tags.
```
cause You are either not using the `{% bootstrap_form form %}` template tag, or form fields are being rendered individually without the `bootstrap_field` filter.

fix To render an entire form, use `{% bootstrap_form form %}`. For individual fields, use `{% bootstrap_field field %}` or iterate `{% for field in form %}{% bootstrap_field field %}{% endfor %}`.

Warnings

breaking The library is in maintenance mode. No new features will be added, only bug fixes and security updates. For new projects, consider using `django-bootstrap5`.
Fix: For new projects, start with `django-bootstrap5`. For existing projects, plan for eventual migration to Bootstrap 5 or accept limited future enhancements.
breaking Bootstrap 4 (and thus django-bootstrap4) does not include an icon set by default, unlike Bootstrap 3. The `bootstrap_icon` template tag was removed.
Fix: If icons are needed, integrate a separate icon library like Font Awesome or use `django-icons` in conjunction with `django-bootstrap4`.
gotcha Static assets (CSS, JavaScript) may not load in production environments (`DEBUG=False`) if Django's static files are not properly configured and collected.
Fix: Ensure `STATIC_ROOT` is defined in `settings.py`, and run `python manage.py collectstatic` on your deployment server. Verify your web server is configured to serve files from `STATIC_ROOT`.
breaking Migrating from `django-bootstrap3` or a Bootstrap 3 project to `django-bootstrap4` is not fully backwards compatible and requires referring to the official Bootstrap 3 to 4 migration guide for client-side changes.
Fix: Carefully review the official Bootstrap migration guide for changes in classes, components, and JavaScript behavior. Update templates and custom CSS accordingly.

Install

pip install django-bootstrap4 Install with pip

Imports

bootstrap4 template tags
wrong:
```
{% load bootstrap_tags %}
```
correct:
```
{% load bootstrap4 %}
```
Older versions or forks sometimes used 'bootstrap_tags', but 'bootstrap4' is the correct and current template tag library name for this package.

Quickstart

After installing, add 'bootstrap4' to `INSTALLED_APPS` in your Django `settings.py`. In your templates, load the `bootstrap4` template tag library and use `{% bootstrap_css %}` and `{% bootstrap_javascript %}` to include Bootstrap's assets. Forms can be easily rendered using `{% bootstrap_form form %}`.

# settings.py
INSTALLED_APPS = [
    # ...
    'bootstrap4',
    # ...
]

# templates/base.html (or any template using Bootstrap)
{% load bootstrap4 %}

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    {% bootstrap_css %}
    <title>My Django App</title>
</head>
<body>
    <div class="container">
        <h1>Hello, Bootstrap 4!</h1>
        <form method="post">
            {% csrf_token %}
            {% bootstrap_form form %}
            {% buttons %}
                <button type="submit" class="btn btn-primary">Submit</button>
            {% endbuttons %}
        </form>
    </div>
    {% bootstrap_javascript %}
</body>
</html>

view raw JSON →