[Bootstrap 4.3] Menu navabar et sous menus

Salut !
Je me sert de bootstrap 4.3 pour réaliser un menu sur mon site mais j'ai un dropdown qui ne s'exécute pas. L'item 'Jeu' contient deux sous items 'Le sardonne' et 'Dementia' qui ont eux même des sous items:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
{% set util = app.session.get('util') %}
 
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <a class="navbar-brand" href="{{ path('skunka_accueil') }}">
    <img src="/img/logo_navbar.png" alt"SP" width="30" height="30">
  </a>
 
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
 
  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
 
      <li class="nav-item">
        <a class="nav-link" href="{{ path('skunka_accueil') }}">Accueil</a>
      </li>
 
      {% if util.permission.id is same as(1)  %}
        <li class="nav-item"> 
          <a class="nav-link" href="{{ path('skunka_permission') }}">Permission</a>
        </li>
      {% endif %}
 
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Jeu
        </a>
 
        {% if util.permission.id is not same as(1) %}
          <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
            <li><a class="dropdown-item" href="#">Le sardonne</a></li>
            <div class="dropdown-divider"></div>
            <li><a class="dropdown-item" href="#">Dementia</a></li>
          </ul>
        {% else %}
          <ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
            <li><a class="dropdown-item dropdown-toggle" href="#">Le sardonne</a></li>
              <ul class="dropdown-menu">
                <li><a class="dropdown-item" href="#">Editer</a></li>
              </ul>
 
            <div class="dropdown-divider"></div>
            <li><a class="dropdown-item" href="#">Dementia</a></li>
            <ul class="dropdown-menu">
                <li><a class="dropdown-item" href="#">Editer</a></li>
              </ul>
          </ul>
        {% endif %}
 
      </li>
 
      {% if util.permission.id is not same as(3) %}
        <li class="nav-item">
          <a class="nav-link" href="{{ path('skunka_amis') }}">Ami</a>
        </li>
      {% endif %}
 
    </ul>
    {{ render(controller('App\\Controller\\ConnexionController::index')) }}
 
  </div>
</nav>

Ce que j'ai actuellement:
Pièce jointe 500302

Le lien 'Jeu' ne se déroule pas.
Je me suis inspiré de la doc:

Citation:

https://getbootstrap.com/docs/4.0/components/navbar/

Et j'importe bien bootstrap:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
 
        {# FONTAWESOME #}
        <script src="https://kit.fontawesome.com/0f5efe7cba.js"></script>
 
        {# BOOTSTRAP #}
        <link crossorigin="anonymous" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" rel="stylesheet">
        <script crossorigin="anonymous" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
        <script crossorigin="anonymous" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
        <script crossorigin="anonymous" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
 
        <link href="/css/style.css" rel="stylesheet" type="text/css">
 
    </head>
    <body>
        {% include "header.html.twig" %}
        <div class="content"> {% block body %}{% endblock %}
            {% include "footer.html.twig" %}
        </div>
        {% include "javascript.html.twig" %}
    </body>
</html>

Merci d'avance !