<div class="form-row{% if field.errors %} invalid{% endif %}{% if field.is_hidden %} hidden{% endif %}{% if is_readonly %} readonly{% endif %}{% if field.field.required %} required{% endif %}">
  <div class="col">
    <div class="form-group row{% if field.name %} field-{{ field.name }}{% endif %} mb-0">

      {% block label %}
        <div class="form-label col-form-label col-md-3 col-xl-2">
          {% spaceless %}
            <label for="{{ field.id_for_label }}">{{ field.label|capfirst }}</label>

            {% if field.help_text %}
              <i class="fa fa-question-circle vHelpIcon"
                 data-toggle="popover" data-placement="top" data-trigger="manual"
                 data-html="true" data-content="{{ field.help_text }}"></i>
            {% endif %}
          {% endspaceless %}
        </div>
      {% endblock %}

      {% block widget %}
        <div class="form-widget col-md-9 col-xl-10">
          {% if is_readonly %}
            <div class="readonly-content">{{ field.contents }}</div>
          {% else %}
            {{ field }}
          {% endif %}

          {% if not is_readonly %}
            <div class="invalid-feedback">
              <ul class="list-unstyled mb-0">
                {% for error in field.errors %}
                  <li>{{ error }}</li>
                {% endfor %}
              </ul>
            </div>
          {% endif %}
        </div>
      {% endblock %}

    </div>
  </div>
</div>