1 pièce(s) jointe(s)
Utilisation de bootstrap 4 avec Symfony 4
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:
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:
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
Pièce jointe 436985
Comme vous pouvez le voir le design ne marche pas...
A coté de cela si je prend la ligne
Code:
<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.
