{% load bootstrap %}

{# Errors use `invalid-feedback d-block` rather than plain `invalid-feedback`:  #}
{# the latter only becomes visible as a sibling of an .is-invalid control, and  #}
{# radio and checkbox groups do not satisfy that selector.                      #}

<div class="mb-3">
  {% if field|is_checkbox %}
    <div class="form-check">
      {{ field }}
      {% if field.auto_id %}
        <label class="form-check-label{% if field.field.required and form.required_css_class %} {{ form.required_css_class }}{% endif %}"
               for="{{ field.auto_id }}">{{ field.label }}</label>
      {% endif %}

      {% for error in field.errors %}
        <div class="invalid-feedback d-block {{ form.error_css_class }}">{{ error }}</div>
      {% endfor %}

      {% if field.help_text %}
        <div class="form-text">{{ field.help_text|safe }}</div>
      {% endif %}
    </div>
  {% elif field|is_radio %}
    {% if field.auto_id %}
      <label class="form-label{% if field.field.required %} {{ form.required_css_class }}{% endif %}">{{ field.label }}</label>
    {% endif %}

    {% for choice in field %}
      <div class="form-check">
        {{ choice.tag }}
        <label class="form-check-label" for="{{ choice.id_for_label }}">{{ choice.choice_label }}</label>
      </div>
    {% endfor %}

    {% for error in field.errors %}
      <div class="invalid-feedback d-block {{ form.error_css_class }}">{{ error }}</div>
    {% endfor %}

    {% if field.help_text %}
      <div class="form-text">{{ field.help_text|safe }}</div>
    {% endif %}
  {% else %}
    {% if field.auto_id %}
      <label class="form-label{% if field.field.required %} {{ form.required_css_class }}{% endif %}"
             for="{{ field.auto_id }}">{{ field.label }}</label>
    {% endif %}

    {{ field }}

    {% for error in field.errors %}
      <div class="invalid-feedback d-block {{ form.error_css_class }}">{{ error }}</div>
    {% endfor %}

    {% if field.help_text %}
      <div class="form-text">{{ field.help_text|safe }}</div>
    {% endif %}
  {% endif %}
</div>