Неверно отображаются сообщения об ошибках Flask-Bootstrap
У меня возникла проблема при использовании FLask WTF форм в совокупности с Flask-Bootstrap. Как видно на картинке сообщения об ошибках появляются, но не горят красным, окна не выделяются.
Попытался разобраться с использованием документации и использовал {{ super() }}, в результате сообщения об ошибках действительно стали красными, окна выделились, но при этом масштаб становился значительно меньше, это в лучшем случае. Если поместить {{ super() }} в любое другое место шаблона, окно вообще может поехать или вылезет ошибка. Помогите разобраться как работает {{ super() }}, в чем проблема и как сделать так, чтобы сообщения об ошибках адекватно выделялись.
{% extends "bootstrap/base.html" %}
{% import "bootstrap/wtf.html" as wtf %}
{% block html %}
{% block head %}
{{ super() }}
{% block meta%}
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
{% endblock %}
{% block style %}
<link rel="icon" href="data:;base64,=">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
{% endblock %}
<style type='text/css'>
#cover {
height: 100% !important;
text-align: center !important;
display: flex !important;
align-items: center !important;
position: relative !important;
}
#cover-caption {
width: 100% !important;
position: relative !important;
z-index: 1 !important;
}
.form-group.col-md-6 {
margin-bottom: 0 !important;
}
</style>
{% endblock %}
{% block body %}
{% block content %}
<section id="cover" class="min-vh-100">
<div id="cover-caption">
<div class="container">
<div class="row">
<div class="col-xl-5 col-lg-6 col-md-8 col-sm-10 mx-auto text-left form p-2">
<div class="px-2">
<div class="container">
<input id="csrf_token" name="csrf_token" type="hidden"
value="IjQ2MWVmZGJmNTQ5YjkxMGJlYTcxNjAzNTczZTRlZmE3NTUzNDdiYjEi.YGdZxQ.wniBm8iLB1uQKcABukGyoJedhSs">
<form class="form-signin" method="POST" action="/signup" style="width: 100%">
{{ form.hidden_tag() }}
{{ wtf.form_field(form.username) }}
{{ wtf.form_field(form.username1) }}
<div class="row">
<div class="form-group col-md-6">
{{ wtf.form_field(form.weight, class='form-control') }}
</div>
<div class="form-group col-md-6">
{{ wtf.form_field(form.height, class='form-control') }}
</div>
</div>
{{ wtf.form_field(form.email) }}
{{ wtf.form_field(form.password) }}
{{ wtf.form_field(form.password1) }}
{{ wtf.form_field(form.select)}}
<button class="btn btn-lg btn-primary btn-block" type="submit">Регистрация</button>
</form>
</div>
{% endblock %}
</div>
</div>
</div>
</div>
</div>
</section>
{% block scripts%}
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
crossorigin="anonymous"></script>
{{ super() }}
{% endblock%}
{% endblock%}
{% endblock%}