I was trying to use a Bootstrap modal in my project, but it would show in the screen.
Searching for a solution I found that bootstrap import libraries need to be in the same order as in the site because of jquery dependecie. Then I verified that the bootstrap base.html respect this other and still nothing worked.
So I moved the scripts tags from the bottom of the template to the head block. Now the modal works fine.
`{% block doc -%}
<html{% block html_attribs %}{% endblock html_attribs %}>
{%- block html %}
{%- block metas %}
{%- endblock metas %}
{%- block head %}
<title>{% block title %}{{title|default}}{% endblock title %}</title>
{%- block styles %}
<!-- Bootstrap -->
<link href="{{bootstrap_find_resource('css/bootstrap.css', cdn='bootstrap')}}" rel="stylesheet">
<link href="{{bootstrap_find_resource('css/fontawesome-all.css', cdn='bootstrap')}}" rel="stylesheet">
<script src="{{bootstrap_find_resource('jquery.js', cdn='jquery')}}"></script>
<script src="{{bootstrap_find_resource('umd/popper.js', cdn='popper')}}"></script>
<script src="{{bootstrap_find_resource('js/bootstrap.js', cdn='bootstrap')}}"></script>
{%- endblock styles %}
{%- endblock head %}
{% block body -%}
{% block navbar %}
{%- endblock navbar %}
{% block content -%}
{%- endblock content %}
{% block scripts %}
{%- endblock scripts %}
{%- endblock body %}
{%- endblock html %}
{% endblock doc -%}
`
I was trying to use a Bootstrap modal in my project, but it would show in the screen.
Searching for a solution I found that bootstrap import libraries need to be in the same order as in the site because of jquery dependecie. Then I verified that the bootstrap base.html respect this other and still nothing worked.
So I moved the scripts tags from the bottom of the template to the head block. Now the modal works fine.
`{% block doc -%}
<html{% block html_attribs %}{% endblock html_attribs %}>
{%- block metas %} {%- endblock metas %}{%- block html %}