Django Bootstrap5

https://github.com/zostera/django-bootstrap5
Admin
Seamlessly integrates Bootstrap 5 with Django, providing template tags and utilities for easy...
Tokens:11,451
Snippets:49
Trust Score:8.2
License:BSD-3-Clause
Update:1 year ago
Show doc for...
Tokens:
Raw
### Example Template Usage

Source: https://github.com/zostera/django-bootstrap5/blob/main/docs/quickstart.rst

Demonstrates how to load the django_bootstrap5 library and utilize its bootstrap_* template tags within a Django template. This is a basic example showing the core functionality.

```django
{% load django_bootstrap5 %}

{% bootstrap_css %}
{% bootstrap_javascript %}

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
</head>
<body>
    <h1>Hello, world!</h1>
    {% bootstrap_button button_type="submit" content="Submit" %}
</body>
</html>
```

--------------------------------

### Run Example App

Source: https://github.com/zostera/django-bootstrap5/blob/main/README.md

Command to run the example application provided within the django-bootstrap5 project. This is useful for testing and seeing the library in action.

```console
just example
```

--------------------------------

### Install django-bootstrap5 with pip

Source: https://github.com/zostera/django-bootstrap5/blob/main/docs/installation.rst

The recommended method for installing django-bootstrap5 is by using pip. This command fetches and installs the latest version of the package from the Python Package Index.

```bash
pip install django-bootstrap5
```

--------------------------------

### Install django-bootstrap5 from source

Source: https://github.com/zostera/django-bootstrap5/blob/main/docs/installation.rst

If you have downloaded or cloned the repository, you can install django-bootstrap5 in editable mode using pip. This is useful for development purposes.

```bash
pip install -e .
```

--------------------------------

### Install django-bootstrap5

Source: https://github.com/zostera/django-bootstrap5/blob/main/README.md

Installs the django-bootstrap5 package using pip. This is the first step to integrate Bootstrap 5 into your Django project.

```console
pip install django-bootstrap5
```

--------------------------------

### Bootstrap Development Environment

Source: https://github.com/zostera/django-bootstrap5/blob/main/CONTRIBUTING.md

Clones the repository and bootstraps the development environment using 'just bootstrap'. Requires git, uv, and just to be installed.

```console
git clone git://github.com/zostera/django-bootstrap5.git
cd django-bootstrap5
just bootstrap
```

--------------------------------

### Add django-bootstrap5 to INSTALLED_APPS

Source: https://github.com/zostera/django-bootstrap5/blob/main/docs/installation.rst

After installation, you need to add 'django_bootstrap5' to the INSTALLED_APPS setting in your Django project's settings.py file to enable the package.

```python
'django_bootstrap5',
```

--------------------------------

### Bootstrap Button Example

Source: https://github.com/zostera/django-bootstrap5/blob/main/example/templates/app/misc.html

Renders a Bootstrap-styled button using the `bootstrap_button` template tag. It specifies the button type, text, and size.

```django
{% extends 'app/base.html' %}
{% load django_bootstrap5 %}

{% block title %}Miscellaneous{% endblock %}

{% block content %}
{% bootstrap_button 'button' size='lg' %}
{% endblock %}
```

--------------------------------

### Bootstrap Alert Example

Source: https://github.com/zostera/django-bootstrap5/blob/main/example/templates/app/misc.html

Displays a Bootstrap alert message with a specified type (e.g., 'danger') using the `bootstrap_alert` template tag. This is useful for displaying error messages or notifications.

```django
{% extends 'app/base.html' %}
{% load django_bootstrap5 %}

{% block title %}Miscellaneous{% endblock %}

{% block content %}
{% bootstrap_alert "Something went wrong" alert_type='danger' %}
{% endblock %}
```

--------------------------------

### Update INSTALLED_APPS

Source: https://github.com/zostera/django-bootstrap5/blob/main/MIGRATE.md

When migrating from django-bootstrap4 to django-bootstrap5, you need to update the 'INSTALLED_APPS' setting in your Django project's settings.py file to reflect the new app name.

```python
INSTALLED_APPS = [
    # ...
    'django_bootstrap5',
    # ...
]
```

--------------------------------

### Example Django Template with Bootstrap 5 Tags

Source: https://github.com/zostera/django-bootstrap5/blob/main/README.md

Demonstrates how to use django-bootstrap5 template tags in a Django form. It includes loading the library, CSRF token, rendering the form with `bootstrap_form`, and adding submit/reset buttons using `bootstrap_button`.

```jinja2
{% load django_bootstrap5 %}

<form action="/url/to/submit/" method="post" class="form">
    {% csrf_token %}

    {% bootstrap_form form %}

    {% bootstrap_button button_type="submit" content="OK" %}
    {% bootstrap_button button_type="reset" content="Cancel" %}
</form>
```

--------------------------------

### Bootstrap Formset Rendering with Django

Source: https://github.com/zostera/django-bootstrap5/blob/main/example/templates/app/formset.html

This snippet shows how to render a Django formset using the django-bootstrap5 template tags. It includes error handling, CSRF protection, and styled buttons for submission and cancellation. Ensure the 'django_bootstrap5' app is loaded in your Django project.

```django
{% extends 'app/base.html' %} {% load django_bootstrap5 %} {% block title %} Formset {% endblock %} {% block content %} {% bootstrap_formset_errors form %} 

{% csrf_token %} {% bootstrap_formset form layout=layout %} {% bootstrap_button button_type="submit" content="OK" %} {% bootstrap_button button_type="reset" content="Cancel" %} 

{% endblock %}
```

--------------------------------

### Replace {% buttons %} with {% bootstrap_button %}

Source: https://github.com/zostera/django-bootstrap5/blob/main/MIGRATE.md

The `{% buttons %} ... {% endbuttons %}` templatetag has been removed in django-bootstrap5. Use the `{% bootstrap_button %}` tag for creating buttons instead.

```django
{% comment %} Old syntax {% endcomment %}
{% buttons %}
    <button type="submit" class="btn btn-primary">Save</button>
{% endbuttons %}

{% comment %} New syntax {% endcomment %}
{% bootstrap_button "Save" button_type="submit" button_class="btn-primary" %}
```

--------------------------------

### jQuery Dependency

Source: https://github.com/zostera/django-bootstrap5/blob/main/MIGRATE.md

Bootstrap 5, used by django-bootstrap5, does not depend on jQuery. Any custom code or templates that relied on jQuery for Bootstrap functionality will need to be updated or jQuery must be included separately if required.

```django
{% comment %} If you need jQuery, include it manually {% endcomment %}
{% load bootstrap5 %}

<!DOCTYPE html>
<html>
<head>
    <title>My Page</title>
    {% bootstrap_css %}
</head>
<body>
    <h1>Hello, Bootstrap 5!</h1>
    {% bootstrap_javascript jquery=True %}
    {# If jquery=True is not used, jQuery is not included by bootstrap_javascript tag #}
</body>
</html>
```

--------------------------------

### Run Tests

Source: https://github.com/zostera/django-bootstrap5/blob/main/CONTRIBUTING.md

Executes the project's tests using the 'just test' command.

```console
just test
```

--------------------------------

### Run Tests Across Configurations

Source: https://github.com/zostera/django-bootstrap5/blob/main/CONTRIBUTING.md

Runs tests across all supported Python and Django combinations using the 'just tests' command.

```console
just tests
```

--------------------------------

### Basic Django Template with Bootstrap5

Source: https://github.com/zostera/django-bootstrap5/blob/main/example/templates/app/home.html

This snippet shows a typical Django template that extends a base template, loads the django_bootstrap5 template tags, and defines content blocks. It includes basic HTML with markdown-like formatting for demonstration.

```django
{% extends 'app/base.html' %}
{% load django_bootstrap5 %}

{% block title %}django-bootstrap5{% endblock %}

{% block content %}
This is _bootstrap5_ for **Django**.
{% endblock %}
```

--------------------------------

### Add django-bootstrap5 to INSTALLED_APPS

Source: https://github.com/zostera/django-bootstrap5/blob/main/README.md

Configures your Django project to use the django-bootstrap5 app by adding it to the INSTALLED_APPS setting in settings.py.

```python
INSTALLED_APPS = (
    # ...
    "django_bootstrap5",
    # ...
)
```

--------------------------------

### Django Bootstrap5 Template Tags

Source: https://github.com/zostera/django-bootstrap5/blob/main/docs/example_template.rst

This snippet demonstrates the core template tags provided by django-bootstrap5 for loading Bootstrap assets, displaying messages, and rendering forms and buttons with Bootstrap styling.

```django
{# Load the tag library #}
{% load django_bootstrap5 %}

{# Load CSS and JavaScript #}
{% bootstrap_css %}
{% bootstrap_javascript %}

{# Display django.contrib.messages as Bootstrap alerts #}
{% bootstrap_messages %}

{# Display a form #}
<form action="/url/to/submit/" method="post" class="form">
  {% csrf_token %}

  {% bootstrap_form form %}

  {% bootstrap_button button_type="submit" content="OK" %}
  {% bootstrap_button button_type="reset" content="Cancel" %}

</form>

{# Read the documentation for more information #}
```

--------------------------------

### Bootstrap Pagination Tag Usage

Source: https://github.com/zostera/django-bootstrap5/blob/main/example/templates/app/pagination.html

Demonstrates the usage of the `bootstrap_pagination` template tag from django-bootstrap5. It shows how to pass pagination data, URL, extra parameters, and control the size of the pagination component.

```django
{% extends 'app/base.html' %}
{% load django_bootstrap5 %}

{% block title %} Pagination {% endblock %}

{% block content %}
  {% for line in lines %}
  {% endfor %}

  {{ line }}

  * * *

  {% bootstrap_pagination lines url="/pagination?page=1&flop=flip" extra="q=foo" size="sm" %}
  {% bootstrap_pagination lines url="/pagination?page=1" size="lg" %}
{% endblock %}
```

--------------------------------

### Django Bootstrap5 Template Tags

Source: https://github.com/zostera/django-bootstrap5/blob/main/src/django_bootstrap5/templates/django_bootstrap5/bootstrap5.html

Demonstrates the core template tags provided by django-bootstrap5 for including Bootstrap CSS and JavaScript, managing language settings, and accessing Bootstrap settings like color mode.

```django
{% load django_bootstrap5 %}
{% load i18n %}

{% get_current_language as LANGUAGE_CODE %}
{% bootstrap_setting "color_mode" as COLOR_MODE %}
{% bootstrap_setting "javascript_in_head" as BOOTSTRAP_JAVASCRIPT_IN_HEAD %}

{% block bootstrap5_title %}django-bootstrap5 template title{% endblock %}

{% bootstrap_css %}

{% if BOOTSTRAP_JAVASCRIPT_IN_HEAD %}
  {% bootstrap_javascript %}
{% endif %}

{% block bootstrap5_extra_head %}{% endblock %}
{% block bootstrap5_before_content %}{% endblock %}
{% block bootstrap5_content %} CONTENT {% endblock %}
{% block bootstrap5_after_content %}{% endblock %}

{% if not BOOTSTRAP_JAVASCRIPT_IN_HEAD %}
  {% bootstrap_javascript %}
{% endif %}

{% block bootstrap5_extra_script %}{% endblock %}
```

--------------------------------

### Bootstrap 5 Template Tag Usage

Source: https://github.com/zostera/django-bootstrap5/blob/main/example/templates/app/base.html

Demonstrates the inclusion and usage of django-bootstrap5 template tags within a Django HTML template. It shows how to extend a base template, load the bootstrap5 library, and render bootstrap messages.

```html
{% extends 'app/bootstrap.html' %}
{% load django_bootstrap5 %}

{% block bootstrap5_content %}

{% block title %}(no title){% endblock %}
=========================================

*   [home]({% url 'home' %})
*   [formset]({% url 'formset_default' %})
*   [form]({% url 'form_default' %})
*   [form_by_field]({% url 'form_by_field' %})
*   [form_horizontal]({% url 'form_horizontal' %})
*   [form_inline]({% url 'form_inline' %})
*   [form_with_files]({% url 'form_with_files' %})
*   [pagination]({% url 'pagination' %})
*   [miscellaneous]({% url 'misc' %})

{% autoescape off %}{% bootstrap_messages %}{% endautoescape %}
{% block content %}(no content){% endblock %}

{% endblock %}
```

--------------------------------

### Django Bootstrap5 Settings Configuration

Source: https://github.com/zostera/django-bootstrap5/blob/main/docs/settings.rst

This snippet shows the default settings for django-bootstrap5, which can be overridden in your project's settings.py. It includes configurations for CSS and JavaScript URLs, theme, color mode, form rendering, and more.

```python
BOOTSTRAP5 = {

    "css_url": {
        "url": "https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css",
        "integrity": "sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx",
        "crossorigin": "anonymous",
    },

    "javascript_url": {
        "url": "https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js",
        "integrity": "sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa",
        "crossorigin": "anonymous",
    },

    "theme_url": None,

    "color_mode": None,

    'javascript_in_head': False,

    'wrapper_class': 'mb-3',

    'inline_wrapper_class': '',

    'horizontal_label_class': 'col-sm-2',

    'horizontal_field_class': 'col-sm-10',

    'horizontal_field_offset_class': 'offset-sm-2',

    "hyphenate_attribute_prefixes": ["data"],

    'set_placeholder': True,

    'required_css_class': '',

    'error_css_class': '',

    'success_css_class': '',

    'server_side_validation': True,

    'formset_renderers':{
        'default': 'django_bootstrap5.renderers.FormsetRenderer',
    },
    'form_renderers': {
        'default': 'django_bootstrap5.renderers.FormRenderer',
    },
    'field_renderers': {
        'default': 'django_bootstrap5.renderers.FieldRenderer',
    },
}
```

--------------------------------

### Bootstrap Form Rendering in Django

Source: https://github.com/zostera/django-bootstrap5/blob/main/example/templates/app/form_with_files.html

Demonstrates how to render a Django form using Bootstrap 5 styling with the django-bootstrap5 library. It includes CSRF token for security and allows specifying the form layout.

```django
{% extends 'app/base.html' %} {% load django_bootstrap5 %} {% block title %} Forms {% endblock %} {% block content %} 

{% csrf_token %} {% bootstrap_form form layout=layout %} {% bootstrap_button button_type="submit" content="OK" %} {% bootstrap_button button_type="reset" content="Cancel" %} 

{% endblock %}
```

--------------------------------

### Bootstrap Form Rendering

Source: https://github.com/zostera/django-bootstrap5/blob/main/example/templates/app/form_inline.html

Renders a Django form using Bootstrap 5 styling with an inline layout. Requires the 'django_bootstrap5' library to be loaded.

```django
{% load django_bootstrap5 %}

{% bootstrap_form form layout='inline' %}
```

--------------------------------

### Bootstrap Button Creation

Source: https://github.com/zostera/django-bootstrap5/blob/main/example/templates/app/form.html

Creates Bootstrap 5 styled buttons for various actions like submit or reset.

```django
{% bootstrap_button button_type="submit" content="OK" %}
{% bootstrap_button button_type="reset" content="Cancel" %}
```

--------------------------------

### Rendering Select Options with Bootstrap

Source: https://github.com/zostera/django-bootstrap5/blob/main/src/django_bootstrap5/templates/django_bootstrap5/widgets/radio_select.html

This snippet shows how to render grouped options for a select input using Django Bootstrap5 template tags. It iterates through option groups and individual options, displaying labels.

```django
{% for group, options, index in widget.optgroups %}
{% if group %}

{{ group }}

{% endif %}
{% for option in options %}

 {{ option.label }}

{% endfor %}
{% endfor %}
```

--------------------------------

### Bootstrap Pagination Links

Source: https://github.com/zostera/django-bootstrap5/blob/main/src/django_bootstrap5/templates/django_bootstrap5/pagination.html

Generates a set of pagination links using Bootstrap styling. It includes logic for displaying previous, next, and page number links, with support for ellipsis (...) when there are many pages. The `bootstrap_pagination_url` tag is used to construct URLs by replacing a specified parameter.

```django
{% load django_bootstrap5 %}
{% with url=bootstrap_pagination_url|default:"" %}

*   [«]({% if current_page == 1 %}#{% else %}{% bootstrap_url_replace_param url parameter_name 1 %}{% endif %})
{% if pages_back %}*   […]({% bootstrap_url_replace_param url parameter_name pages_back %})
{% endif %} {% for page in pages_shown %}*   [{{ page }}]({% if current_page == page %}#{% else %}{% bootstrap_url_replace_param url parameter_name page %}{% endif %})
{% endfor %} {% if pages_forward %}*   […]({% bootstrap_url_replace_param url parameter_name pages_forward %})
{% endif %}*   [»]({% if current_page == num_pages %}#{% else %}{% bootstrap_url_replace_param url parameter_name num_pages %}{% endif %})

{% endwith %}
```

--------------------------------

### Bootstrap Button Creation

Source: https://github.com/zostera/django-bootstrap5/blob/main/example/templates/app/form_inline.html

Creates Bootstrap-styled buttons for form submission and resetting. These buttons are typically used within a form context.

```django
{% bootstrap_button button_type="submit" content="OK" %}
{% bootstrap_button button_type="reset" content="Cancel" %}
```

--------------------------------

### Django Bootstrap5 Template Tags

Source: https://github.com/zostera/django-bootstrap5/blob/main/docs/templatetags.rst

This section documents the template tags provided by the django-bootstrap5 library. These tags simplify the process of rendering Bootstrap-styled HTML elements directly within Django templates. Ensure the 'django_bootstrap5' template tag library is loaded before using these tags.

```APIDOC
bootstrap_form(form)
  Renders a complete Django form with Bootstrap styling.

bootstrap_form_errors(form)
  Renders only the errors for a Django form with Bootstrap styling.

bootstrap_formset(formset)
  Renders a complete Django formset with Bootstrap styling.

bootstrap_formset_errors(formset)
  Renders only the errors for a Django formset with Bootstrap styling.

bootstrap_field(field, label_class='', field_class='', widget_attrs={})
  Renders a single form field with Bootstrap styling, allowing customization of label and field classes, and widget attributes.

bootstrap_label(field, label_class='', **kwargs)
  Renders a label for a form field with Bootstrap styling, allowing customization of label classes and other attributes.

bootstrap_button(name, value, type='submit', **kwargs)
  Renders a Bootstrap-styled button.

bootstrap_alert(content, alert_type='info', **kwargs)
  Renders a Bootstrap alert message.

bootstrap_messages(messages)
  Renders Django's built-in messages with Bootstrap styling.

bootstrap_pagination(page_obj, **kwargs)
  Renders Bootstrap-styled pagination controls for a Django Paginator object.

bootstrap_javascript_url()
  Returns the URL for Bootstrap's JavaScript file.

bootstrap_css_url()
  Returns the URL for Bootstrap's CSS file.

bootstrap_css()
  Includes the Bootstrap CSS link tag in the template.

bootstrap_javascript()
  Includes the Bootstrap JavaScript script tag in the template.
```

--------------------------------

### Django Bootstrap5 Field Help Text and Errors Template

Source: https://github.com/zostera/django-bootstrap5/blob/main/docs/templates.rst

This template is responsible for rendering the help text and errors associated with individual form fields. It expects a variable named 'help_text_and_errors' which is an array of strings.

```html
<!-- django_bootstrap5/field_help_text_and_errors.html -->
{% comment %}
This renders the help text and error of each field.
Variable "help_text_and_errors" contains an array of strings.
{% endcomment %}

{% for item in help_text_and_errors %}
    <p>{{ item }}</p>
{% endfor %}
```

--------------------------------

### Django Form Widget Initial Value Rendering

Source: https://github.com/zostera/django-bootstrap5/blob/main/src/django_bootstrap5/templates/django_bootstrap5/widgets/clearable_file_input.html

This snippet demonstrates how Django's template engine renders initial values for form widgets. It checks if a widget has an initial value and displays it along with a link to its URL. It also conditionally renders a checkbox to clear the initial value if the field is not required.

```django-html
{% if widget.is_initial %}

{{ widget.initial_text }}:  [{{ widget.value }}]({{ widget.value.url }})

{% if not widget.required %}

 {{ widget.clear_checkbox_label }}

{% endif %}

{% endif %}
```

--------------------------------

### Bootstrap Form Rendering

Source: https://github.com/zostera/django-bootstrap5/blob/main/example/templates/app/form.html

Renders a Django form using Bootstrap 5 styling. Allows customization of layout and size.

```django
{% load django_bootstrap5 %}

{% bootstrap_form form layout=layout size=size %}
```

--------------------------------

### Bootstrap Server-Side Validation Class

Source: https://github.com/zostera/django-bootstrap5/blob/main/src/django_bootstrap5/templates/django_bootstrap5/widgets/radio_select.html

This snippet demonstrates how to use the `bootstrap_server_side_validation_class` template tag to apply server-side validation classes to a widget in Django. It iterates through widget options to apply appropriate classes.

```django
{% load django_bootstrap5 %}
{% bootstrap_server_side_validation_class widget as server_side_validation_class %}
```

--------------------------------

### Bootstrap5 Template Inheritance

Source: https://github.com/zostera/django-bootstrap5/blob/main/example/templates/app/bootstrap.html

This snippet demonstrates how to extend the base bootstrap5 template in Django. It shows how to override the 'bootstrap5_title' block and the nested 'title' block for custom page titles.

```django
{% extends 'django_bootstrap5/bootstrap5.html' %}

{% block bootstrap5_title %}
  {% block title %}
  {% endblock %}
{% endblock %}
```

--------------------------------

### Django Bootstrap5 Messages Template

Source: https://github.com/zostera/django-bootstrap5/blob/main/docs/templates.rst

This template is designed to display Django messages. It processes the 'messages' variable using 'safe', 'urlize', and 'linebreaksbr' filters for enhanced output formatting.

```html
<!-- django_bootstrap5/messages.html -->
{% comment %}
This renders the Django messages variable.
Variable "messages" contains the messages as described in https://docs.djangoproject.com/en/dev/ref/contrib/messages/#displaying-messages

"messages" is passed through three built-in filters

safe <https://docs.djangoproject.com/en/dev/ref/templates/builtins/#std:templatefilter-safe>

urlize <https://docs.djangoproject.com/en/dev/ref/templates/builtins/#std:templatefilter-urlize>

linebreaksbr <https://docs.djangoproject.com/en/dev/ref/templates/builtins/#std:templatefilter-linebreaksbr>
{% endcomment %}

{% for message in messages %}
    <p>{{ message|safe|urlize|linebreaksbr }}</p>
{% endfor %}
```

--------------------------------

### Django Bootstrap5 Form Rendering

Source: https://github.com/zostera/django-bootstrap5/blob/main/example/templates/app/form_by_field.html

Renders a Django form using django-bootstrap5 tags. Includes CSRF token, form errors, and individual form fields with custom layouts and placeholders. Also shows how to render submit and reset buttons.

```html
{% extends 'app/base.html' %} {% load django_bootstrap5 %} {% block title %} Forms {% endblock %} {% block content %}

{% csrf_token %} {% bootstrap_form_errors form type='non_fields' %} {% bootstrap_field form.subject layout='horizontal' size='sm' %} {% bootstrap_field form.message placeholder='bonkers' %} {% bootstrap_button button_type="submit" content="OK" %} {% bootstrap_button button_type="reset" content="Cancel" %}

{% endblock %}
```

--------------------------------

### Django Bootstrap5 Form Rendering Options

Source: https://github.com/zostera/django-bootstrap5/blob/main/docs/forms.rst

Describes the required and suggested functionalities for django-bootstrap5 to render forms according to Bootstrap 5 standards. This includes support for formsets, forms, fields, and options for customizing CSS classes and templates.

```python
# Support for bootstrap_formset, bootstrap_form, and bootstrap_field
# Option to override wrapper classes
# Option to override templates
```

--------------------------------

### Bootstrap 5 Horizontal Forms Configuration

Source: https://github.com/zostera/django-bootstrap5/blob/main/docs/forms.rst

Describes how to implement Bootstrap 5 horizontal forms using django-bootstrap5 by setting `layout="horizontal"`. It outlines the parameters used for styling labels and fields in a horizontal layout.

```python
# Enable horizontal forms with layout="horizontal"
# Parameters:
# - horizontal_label_class
# - horizontal_field_class
# - horizontal_field_offset_class
```

--------------------------------

### Bootstrap Alerts in Django

Source: https://github.com/zostera/django-bootstrap5/blob/main/src/django_bootstrap5/templates/django_bootstrap5/messages.html

This snippet demonstrates how to load the django-bootstrap5 template tags and iterate through Django messages to render them as Bootstrap alerts. It utilizes the `bootstrap_alert` tag to dynamically set the alert type and extra classes based on the message content.

```django
{% load django_bootstrap5 %}

{% for message in messages %}
  {% bootstrap_alert message.message|default:"" alert_type=message|bootstrap_message_alert_type extra_classes=message.extra_tags %}
{% endfor %}
```

--------------------------------

### Bootstrap 5 Form Field Structure

Source: https://github.com/zostera/django-bootstrap5/blob/main/docs/forms.rst

Illustrates the standard HTML structure for a Bootstrap 5 form field, including wrapper, label, input field, help text, and validation messages. This structure is fundamental for responsive and accessible forms.

```html
<div class="mb-3"> <!-- wrapper start -->
    <label for="name" class="form-label">Email address</label> <!-- label -->
    <input type="text" class="form-control" id="name" aria-describedby="nameHelp"> <!-- field -->
    <div id="nameHelp" class="form-text">An alias is fine.</div> <!-- help text -->
    <div class="valid-feedback">Looks good!</div> <!-- validation text -->
</div>
```

--------------------------------

### Iterating Widget Options in Django Templates

Source: https://github.com/zostera/django-bootstrap5/blob/main/src/django_bootstrap5/templates/django_bootstrap5/widgets/radio_select_button_group.html

This snippet demonstrates how to iterate through grouped options and individual options within a Django template, commonly used for rendering form widgets with Bootstrap styling.

```django
{% for group, options, index in widget.optgroups %}
  {% for option in options %}
    {{ option.label }}
  {% endfor %}
{% endfor %}
```

--------------------------------

### RadioSelectButtonGroup Usage

Source: https://github.com/zostera/django-bootstrap5/blob/main/docs/widgets.rst

Demonstrates how to use the RadioSelectButtonGroup widget in a Django form to render a ChoiceField as a Bootstrap 5 button group. It highlights the widget's purpose and its current known rendering issue.

```django
from django import forms
from django_bootstrap5.widgets import RadioSelectButtonGroup

class MyForm(forms.Form):
    media_type = forms.ChoiceField(
        help_text="Select the order type.",
        required=True,
        label="Order Type:",
        widget=RadioSelectButtonGroup,
        choices=((1, 'Vinyl'), (2, 'Compact Disc')),
        initial=1,
    )
```

--------------------------------

### Bootstrap 5 Input Group Support

Source: https://github.com/zostera/django-bootstrap5/blob/main/docs/forms.rst

Details the requirements for django-bootstrap5 to support Bootstrap 5's input groups, which allow combining fields with add-ons. It emphasizes the need for separate rendering of form components and support for add-ons within `bootstrap_field`.

```python
# Support separate rendering of labels, fields, help texts and errors
# Support for add-ons (before and after) as part of `bootstrap_field`
# Option to define add-ons in Python code
```

--------------------------------

### Render Django Form Errors

Source: https://github.com/zostera/django-bootstrap5/blob/main/src/django_bootstrap5/templates/django_bootstrap5/form_errors.html

This snippet demonstrates how to iterate over Django form errors and display them in an HTML list. It's commonly used within Django templates to provide user feedback on form submissions.

```django
{% for error in errors %}*   {{ error }}
{% endfor %}
```

--------------------------------

### Bootstrap 5 Floating Labels Configuration

Source: https://github.com/zostera/django-bootstrap5/blob/main/docs/forms.rst

Explains how to enable Bootstrap 5's floating label behavior in django-bootstrap5 by setting `layout="floating"`. It also lists the limitations and unsupported widgets for this feature, such as FileInput and certain TextInput types.

```python
# Enable floating labels with layout="floating"
# Limitations: FileInput, TextInput with type 'color', fields with addon_before/addon_after
# Select widget limitations: default size, no multiple selects, no special markup
```

--------------------------------

### Bootstrap Form Rendering

Source: https://github.com/zostera/django-bootstrap5/blob/main/example/templates/app/form_horizontal.html

Renders a Django form using the bootstrap_form tag with a horizontal layout. Requires {% csrf_token %} for security.

```django
{% extends 'app/base.html' %}
{% load django_bootstrap5 %}

{% block title %} Forms {% endblock %}

{% block content %}

{% csrf_token %}
{% bootstrap_form form layout="horizontal" %}

{% bootstrap_button button_type="submit" content="OK" %}
{% bootstrap_button button_type="reset" content="Cancel" %}

{% endblock %}
```

--------------------------------

### Django Bootstrap5 Form Errors Template

Source: https://github.com/zostera/django-bootstrap5/blob/main/docs/templates.rst

This template handles the rendering of non-field errors for a form. It utilizes a variable named 'errors', which is an array of strings representing the form's errors.

```html
<!-- django_bootstrap5/form_errors.html -->
{% comment %}
This renders the non field errors of a form.
Variable "errors" contains an array of strings.
{% endcomment %}

{% for error in errors %}
    <p>{{ error }}</p>
{% endfor %}
```

--------------------------------

### Display Field Errors in Django with Bootstrap 5

Source: https://github.com/zostera/django-bootstrap5/blob/main/src/django_bootstrap5/templates/django_bootstrap5/field_errors.html

This snippet iterates through a list of field errors provided by Django's form rendering and displays each error message. It assumes the `field_errors` variable is available in the template context, typically generated when a form has validation errors.

```django
{% if field_errors %}

{% for text in field_errors %}

{{ text }}

{% endfor %}

{% endif %}
```
Tokens:
Raw