Django Bootstrap Form

Common errors

• TemplateSyntaxError: 'bootstrap_form' is not a registered tag library

  cause The `django_bootstrap_form` app is not included in your Django project's `INSTALLED_APPS` setting, or the `{% load bootstrap_form %}` tag is missing from your template.
  fix Add `'django_bootstrap_form'` to your `INSTALLED_APPS` list in `settings.py` and ensure `{% load bootstrap_form %}` is at the top of the template where you use the tags.

• My Django form, when rendered with django-bootstrap-form, doesn't look like Bootstrap 4 or 5.

  cause django-bootstrap-form generates HTML markup primarily compatible with Bootstrap 3. Newer Bootstrap versions (4 and 5) have different class names and structural conventions, leading to styling discrepancies.
  fix If you need Bootstrap 4 or 5 styling, either apply custom CSS overrides to the Bootstrap 3 markup generated by this library, write custom form templates using Bootstrap 4/5 classes, or consider using libraries specifically designed for newer Bootstrap versions (e.g., `django-bootstrap4` or `django-bootstrap5`).

• TypeError: 'CharField' object is not iterable / AttributeError: 'str' object has no attribute 'errors'

  cause You are likely attempting to pass a Django form *field definition* (e.g., `forms.CharField`) directly to a template filter or tag that expects a `BoundField` instance (part of an instantiated form) or an entire form instance.
  fix Ensure you are passing an instantiated Django `Form` object (e.g., `form_instance`) to `{{ form|bootstrap_form }}` or a `BoundField` (e.g., `form_instance.name`) to `{{ field|bootstrap_field }}`. Always use the form object created in your view, not the class definition.

Warnings

• gotcha This library is primarily designed for Bootstrap 3. While it can be used with newer Bootstrap versions (4/5), the generated HTML markup will adhere to Bootstrap 3 conventions, potentially requiring manual CSS adjustments or custom templates for full compatibility.
  Fix: If targeting Bootstrap 4/5, consider using `django-bootstrap4`, `django-bootstrap5`, or a custom form template for better integration. If using this library, be prepared for minor styling inconsistencies.
• gotcha The `bootstrap_form` template tags must be loaded at the top of any template where they are used. Forgetting `{% load bootstrap_form %}` will result in a `TemplateSyntaxError`.
  Fix: Ensure `{% load bootstrap_form %}` is present at the beginning of your Django template file where you intend to use the `bootstrap_form` filter or `bootstrap_field` tag. Also, verify `django_bootstrap_form` is in `INSTALLED_APPS`.
• gotcha This library focuses exclusively on rendering Django forms and fields with Bootstrap styling. It does not provide components like navigation bars, modals, or other general Bootstrap UI elements.
  Fix: For comprehensive Bootstrap UI component integration, pair this library with manual HTML/CSS or use a more feature-rich Django Bootstrap integration library that covers a wider range of UI elements.

Install

• pip install django-bootstrap-form Install latest version

Imports

• template tags
  wrong:

  {% load bootstrap4 %}

  correct:

  {% load bootstrap_form %}

  This library uses `bootstrap_form` for its template tags, not `bootstrap4` or `bootstrap5`, which belong to other integration libraries.

Quickstart

This quickstart demonstrates how to render a Django form using the `bootstrap_form` template filter, or individual fields with `bootstrap_field`. It requires loading the `bootstrap_form` template tags at the top of your template. Ensure `django_bootstrap_form` is added to your Django project's `INSTALLED_APPS` for the tags to be available. The example also includes a Bootstrap 3 CSS link for correct styling.

import os
from django import forms
from django.template import Template, Context
from django.conf import settings

# Minimal Django settings setup for standalone template rendering
# In a real Django project, this is handled by your settings.py
if not settings.configured:
    settings.configure(
        TEMPLATES=[
            {
                'BACKEND': 'django.template.backends.django.DjangoTemplates',
                'DIRS': [],
                'APP_DIRS': True,
                'OPTIONS': {
                    'context_processors': [
                        'django.template.context_processors.debug',
                        'django.template.context_processors.request',
                    ],
                    'libraries': {
                        'bootstrap_form': 'django_bootstrap_form.templatetags.bootstrap_form',
                    }
                },
            }
        ],
        INSTALLED_APPS=[
            'django_bootstrap_form',
            'django.contrib.auth',
            'django.contrib.contenttypes',
        ]
    )

# Simulate a simple Django form
class MyForm(forms.Form):
    name = forms.CharField(label='Your Name', max_length=100)
    email = forms.EmailField(label='Your Email')
    message = forms.CharField(widget=forms.Textarea, label='Your Message')
    subscribe = forms.BooleanField(label='Subscribe to newsletter', required=False)

# Template string demonstrating usage
template_string = '''
{% load bootstrap_form %}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Django Bootstrap Form</title>
    <!-- Bootstrap 3 CSS -->
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <style>
        body { padding: 20px; }
        .container { max-width: 600px; }
    </style>
</head>
<body>
    <div class="container">
        <h1>Contact Us</h1>
        <form method="post">
            {% csrf_token %} <!-- Required in a real Django app -->
            {{ form|bootstrap_form }}
            <button type="submit" class="btn btn-primary">Submit</button>
        </form>

        <hr>
        <h2>Individual Field Rendering</h2>
        <form method="post">
            {% csrf_token %}
            {% for field in form %}
                {{ field|bootstrap_field }}
            {% endfor %}
            <button type="submit" class="btn btn-success">Submit Individual</button>
        </form>
    </div>
</body>
</html>
'''

# Instantiate the form
form_instance = MyForm()

# Create a context for rendering
context = Context({'form': form_instance})

# Render the template
template = Template(template_string)
rendered_html = template.render(context)

# Print the rendered HTML (in a real Django app, this would be returned by a view)
print(rendered_html)