Symfony 3.4.20 and Bootstrap 4 - Form validation

Question

I'm extending FOSUserBundle's user registration form. I have it looking and working the way I want, with one exception - validation. Errors appear, but the fields don't show red/green borders upon submission for invalid/valid inputs, and the errors themselves are presented in unordered lists with no styling rather than divs with error colors. Is there a simple way of getting it to look how I want? My form's Twig code:

{{ form_start(form, {'method': 'post', 'action': path('fos_user_registration_register'), 'attr': {'class': 'fos_user_registration_register'}}) }}
    <fieldset>
        <legend>Login Info</legend>
        <div class="form-group">
            {{ form_label(form.username) }}
            {{ form_widget(form.username, { 'attr': {'class': 'form-control'} }) }}
            {{ form_errors(form.username) }}
        </div>
        <div class="form-group">
            {{ form_label(form.email) }}
            {{ form_widget(form.email, { 'attr': {'class': 'form-control'} }) }}
            {{ form_errors(form.email) }}
        </div>
        <div class="form-group">
            {{ form_label(form.plainPassword.first) }}
            {{ form_widget(form.plainPassword.first, { 'attr': {'class': 'form-control'} }) }}
            {{ form_errors(form.plainPassword.first) }}
        </div>
        <div class="form-group">
            {{ form_label(form.plainPassword.second) }}
            {{ form_widget(form.plainPassword.second, { 'attr': {'class': 'form-control'} }) }}
            {{ form_errors(form.plainPassword.second) }}
        </div>
    </fieldset>

    <fieldset>
        <legend>Shipping Address</legend>
        <div class="form-group">
            {{ form_label(form.name) }}
            {{ form_widget(form.name, {'attr': {'class': 'form-control'}}) }}
            {{ form_errors(form.name) }}
        </div>
        <div class="form-group">
            {{ form_label(form.line1) }}
            {{ form_widget(form.line1, {'attr': {'class': 'form-control'}}) }}
            {{ form_errors(form.line1) }}
        </div>
        <div class="form-group">
            {{ form_label(form.line2) }}
            {{ form_widget(form.line2, {'attr': {'class': 'form-control'}}) }}
            {{ form_errors(form.line2) }}
        </div>
        <div class="form-row">
            <div class="form-group col-6">
                {{ form_label(form.city) }}
                {{ form_widget(form.city, {'attr': {'class': 'form-control'}}) }}
                {{ form_errors(form.city) }}
            </div>
            <div class="form-group col-4">
                {{ form_label(form.state) }}
                {{ form_widget(form.state, {'attr': {'class': 'form-control'}}) }}
                {{ form_errors(form.state) }}
            </div>
            <div class="form-group col-2">
                {{ form_label(form.zipcode) }}
                {{ form_widget(form.zipcode, {'attr': {'class': 'form-control'}}) }}
                {{ form_errors(form.zipcode) }}
            </div>
        </div>
        <div class="form-group">
            {{ form_label(form.phone) }}
            {{ form_widget(form.phone, {'attr': {'class': 'form-control'}}) }}
            {{ form_errors(form.phone) }}
        </div>
    </fieldset>

    <small>We only ship within the US</small>

    <div>
        <button type="submit" id="register-submit-btn" class="btn btn-burnt-orange">Register account</button>
    </div>
    {{ form_rest(form) }}
{{ form_end(form) }}

Answer 1

May be because the blocks of errors are not styled with bootstrap. If you want to use bootstrap 4 for all forms you can add this configuration :

twig:
    form_themes: ['bootstrap_4_layout.html.twig']

Answer 2

if you check classes doing inspect element you will see that unordered lists are added by default in form errors.. you have to override the original template in order to add your divs.. form_theme here allows you to make the change in one template,rather than adding the template as a resource in config.yml

{% form_theme form 'form/form_errors.html.twig' %}

    {{ form_errors(form.phone) }}

then in the file form_errors.html.twig

{# form_errors.html.twig #}
{% block form_errors %}
    {% spaceless %}
        {% if errors|length > 0 %}
        <ul>
            {% for error in errors %}
                <li>{{ error.message }}</li>
            {% endfor %}
        </ul>
        {% endif %}
    {% endspaceless %}
{% endblock form_errors %}

check Symfony docs here