In addition, this is the expected layout of validation errors:

Can you confirm that #27892 will fix your issue?

@xabbuh Yes, this should fix my issue 😉

Came from #29986 , it needs to be done.

Read the arguments from this closed topic (#29986).
I also propose to abandon the badge "Error", it is not in official bootstrap style, or expand with the possibility of changing it via block "form_error_badge"

Thank you for this issue. I have reviewed this and discussed it many times but the solution is more tricky that you first expect.

I do agree that there is an issue. However the implementation is intentional. We really want the error messages in the labels because that helps screen readers and blind users.

At #eu-fossa we were a bunch of people that sat done and discussed this to find a solution. We came up with the following solution:

• We introduce an option for twig context like errors_in_labels that are default true
• bootstrap_4_layout.html.twig has the errors in the labels as default
• bootstrap_4_horizontal_layout.html.twig has errors_in_labels: false
• When ever errors_in_labels: false we add the error message under the input field as Bootstrap suggests. We should also use aria-describedby (See [docs](https://www.w3.org/WAI/tutorials/forms/notifications/#after-submit

<div class="error">
	<label for="username">
		<strong>Error:</strong> <!-- Maybe we should add line this too? -->
		Username:
	</label>
	<input type="text" 
                name="username"
		id="username"
		aria-describedby="username-desc">
	<span id="username-desc">The username is already taken.</span>
</div>

Sounds like a great solution to me :-) Is there an ETA for the implementation of this solution?

As far as I know. Nobody is correctly working on it. Feel free to write a PR. If you do, please make a comment here.

I will give it a try next week :-) But I have one question regarding the errors_in_labels option. How will this option be set? Will this option be made available as configuration option of the twig bridge component? Or is there another way of setting such option?

Tell me if I wrong but IMO it's not to us to defined how should be rendered errors with Bootstrap (inside or outside label for accessibility purposes).

Bootstrap documentation already specify how errors should be rendered, if we implement a Bootstrap form theme we must follow Bootstrap documentation and not make our own opinionated layout.

But maybe I miss something :).

any updates ?

Not yet as I did not have any time to work on this.

Hey, thanks for your report!
There has not been a lot of activity here for a while. Is this bug still relevant? Have you managed to find a workaround?

Hello? This issue is about to be closed if nobody replies.

I am using the following snippet as a workaround (unfortunately I do not know where I found this snippet, so credets for whoever wrote this):

{% block form_row -%}
    <div class="form-group row{% if (not compound or force_error|default(false)) and not valid %} is-invalid{% endif %}">
        {{- form_label(form) -}}
        <div class="{{ block('form_group_class') }}">
            {{- form_widget(form) -}}
            {{- form_errors(form) -}}
            {{- form_help(form) -}}
        </div>
    </div>
{%- endblock form_row %}

Here's my workaround for Symfony 4.4. The code is taken from bootstrap_4_layout.html.twig, I commented the extra errors stuff in form_label and form_errors, and added a form_errors in form_row, as did @frostieDE. Probably not great, looking forward a real fix.

{% extends "bootstrap_4_layout.html.twig" %}

{% block form_label -%}
    {% if label is not same as(false) -%}
        {%- if compound is defined and compound -%}
            {%- set element = 'legend' -%}
            {%- set label_attr = label_attr|merge({class: (label_attr.class|default('') ~ ' col-form-label')|trim}) -%}
        {%- else -%}
            {%- set label_attr = label_attr|merge({for: id}) -%}
        {%- endif -%}
        {% if required -%}
            {% set label_attr = label_attr|merge({class: (label_attr.class|default('') ~ ' required')|trim}) %}
        {%- endif -%}
        {% if label is empty -%}
            {%- if label_format is not empty -%}
                {% set label = label_format|replace({
                    '%name%': name,
                    '%id%': id,
                }) %}
            {%- else -%}
                {% set label = name|humanize %}
            {%- endif -%}
        {%- endif -%}
        <{{ element|default('label') }}{% if label_attr %}{% with { attr: label_attr } %}{{ block('attributes') }}{% endwith %}{% endif %}>
            {{ translation_domain is same as(false) ? label : label|trans(label_translation_parameters, translation_domain) }}
            {# {% block form_label_errors %}{{- form_errors(form) -}}{% endblock form_label_errors %} #}
        </{{ element|default('label') }}>
    {%- else -%}
        {# {%- if errors|length > 0 -%}
        <div id="{{ id }}_errors" class="mb-2">
            {{- form_errors(form) -}}
        </div>
        {%- endif -%} #}
    {%- endif -%}
{%- endblock form_label %}

{% block form_row -%}
    {%- if compound is defined and compound -%}
        {%- set element = 'fieldset' -%}
    {%- endif -%}
    {%- set widget_attr = {} -%}
    {%- if help is not empty -%}
        {%- set widget_attr = {attr: {'aria-describedby': id ~"_help"}} -%}
    {%- endif -%}
    <{{ element|default('div') }}{% with {attr: row_attr|merge({class: (row_attr.class|default('') ~ ' form-group')|trim})} %}{{ block('attributes') }}{% endwith %}>
        {{- form_label(form) -}}
        {{- form_widget(form, widget_attr) -}}
        {{- form_errors(form) -}}
        {{- form_help(form) -}}
    </{{ element|default('div') }}>
{%- endblock form_row %}

{% block form_errors -%}
    {%- if errors|length > 0 -%}
        <span class="{% if form is not rootform %}invalid-feedback{% else %}alert alert-danger{% endif %} d-block">
            {%- for error in errors -%}
                <span class="d-block">
                    {# <span class="form-error-icon badge badge-danger text-uppercase">{{ 'Error'|trans({}, 'validators') }}</span> #}
                    <span class="form-error-message">{{ error.message }}</span>
                </span>
            {%- endfor -%}
        </span>
    {%- endif %}
{%- endblock form_errors %}

Hey, thanks for your report!
There has not been a lot of activity here for a while. Is this bug still relevant? Have you managed to find a workaround?

On my end: I'm still relying on the workaround I mentioned above.

I resigned myself and just accept that the implementation difference should be in your own cookbook

Same here - I just went with the workaround :-)

It even breaks the standard "required" asterisk next to the labels on vertical layouts.

Hey, thanks for your report!
There has not been a lot of activity here for a while. Is this bug still relevant? Have you managed to find a workaround?

Friendly reminder that this issue exists. If I don't hear anything I'll close this.

Fixed by #46414 IIUC