Utilisation de bootstrap 4 avec Symfony 4

**Amnael** · 26/12/2018, 20h01

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 : 1275
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.

**vanessa_asse** · 27/12/2018, 18h57

Pour utiliser Bootstrap, au lieu de l'installer dans tes dépendances, je te conseille de le charger dans ton layout de base comme ceci :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
                  integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" >

Voici le lien vers la doc pour cette install' =
https://getbootstrap.com/docs/4.2/ge.../introduction/

**armel18** · 27/12/2018, 20h15

ton bootstrap tu l'as installé via yarn en tant que module js. donc il se trouve dans le dossier node_modules/bootstrap.

il suffit de l'importer depuis un fichier scss(ou css) représentant l'un des tes entrrypoints du webpack.config.js. Par exemple :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
//webpack.config.js
 
.addStyleEntry('css/app', './assets/css/app.scss')

-avec sass, tu peux l'importer dans l'entrypoint app.scss :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 
//assets/css/app.scss
@import "~bootstrap/scss/bootstrap"; // importe le fichier bootstrap.scss situé dans node_modules/bootstrap/scss/bootstrap/

-si tu travailles avec du css et non scss il faut recuperer la version css du bootstrap se trouvant dans node_modules/bootstrap/dist/css/

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 
//assets/css/app.scss
@import "./../../node_modules/bootstrap/dist/css/bootstrap.css"; // importe le fichier bootstrap.scss situé dans node_modules/bootstrap/scss/bootstrap/

**Amnael** · 28/12/2018, 14h43

Effectivement, je n'avais pas encore de fichier scss, uniquement css et js. Du coup je ne faisais que l'import du bootstrap js et non du CSS.

Maintenant l'import est correct.

Merci beaucoup.

Ceci étant dit, je m'étonne d'une chose à présent, le style de mon btn btn-primary bien qu'appliquant le style de bootstrap ne semble pas proposer la même couleur que dans la doc.

Ici à gauche un btn info qui semble appliquer la bonne couleur
A droite un btn primary qui lui semble beaucoup plus foncé que ce qu'il ne devrait être.

Je me demande donc s'il n'y a pas encore quelque chose qui intervient entre bootstrap et l'application.

Utilisation de bootstrap 4 avec Symfony 4 [4.x]

Symfony PHP

Discussions similaires

Partager

Partager