Bonsoir,

le problème est assez simple à expliquer, mais je ne sais pas comment le résoudre, j'espère que vous aurez une idée.

J'ai installé Bootstrap 4

Cf le fichier package.json

Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
    {
        "devDependencies": {
            "@symfony/webpack-encore": "^0.22.0",
            "jquery.js": "^0.0.2-security",
            "popper.js": "^1.14.6",
            "webpack-notifier": "^1.6.0"
        },
        "license": "UNLICENSED",
        "private": true,
        "scripts": {
            "dev-server": "encore dev-server",
            "dev": "encore dev",
            "watch": "encore dev --watch",
            "build": "encore production --progress"
        },
        "dependencies": {
            "bootstrap": "^4.2.1",
            "jquery": "^3.3.1"
        }
    }
Je souhaite donc maintenant utiliser les classes de bootstrap.

En l'occurence dans mon cas la classe btn btn-primary pour faire la validation d'un formulaire.

Voici à quoi ressemble mon fichier base.html.twig

Notez que j'ai rajouté exprès le bouton seul sur cette page au dessus du body pour que vous voyez le problème

Code : Sélectionner tout - Visualiser dans une fenêtre à part
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">
        <title>{% block title %}Welcome!{% endblock %}</title>
        {% block stylesheets %}
            {# 'app' must match the first argument to addEntry() in webpack.config.js #}
            {{ encore_entry_link_tags('app') }}
 
            <!-- Renders a link tag (if your module requires any CSS)
                 <link rel="stylesheet" href="/build/app.css"> -->
        {% endblock %}
    </head>
    <body>
    <button type="submit" class="btn btn-primary">S'enregistrer</button>
        {% block body %}{% endblock %}
        {% block javascripts %}
            {{ encore_entry_script_tags('app') }}
 
            <!-- Renders app.js & a webpack runtime.js file
                <script src="/build/runtime.js"></script>
                <script src="/build/app.js"></script> -->
        {% endblock %}
    </body>
</html>
Et voilà le résultat

Nom : btn.png Affichages : 1313 Taille : 1,9 Ko

Comme vous pouvez le voir le design ne marche pas...

A coté de cela si je prend la ligne
Code : Sélectionner tout - Visualiser dans une fenêtre à part
<button type="submit" class="btn btn-primary">S'enregistrer</button>
et que je la teste dans un jsfiddle, cela fonctionne bien.

Donc soit mon import de bootstrap n'est pas correct...mais dans mon App.js bootstrap est bien présent.
Soit quelque chose empêche son fonctionnement correct...mais je ne saurais pas dire quoi.


Cela m'a l'air d'être un problème assez récurrent, j'espère que vous aurez la solution

Merci à tous.