How to enable Bootstrap in Symfony 6 project
Bootstrap is the most popular HTML, CSS, and JavaScript framework for developing responsive, mobile-first websites.
Requirements:
-
- Symfony 6 version installed on your machine (docker or server);
- Yarn to install on your device (docker or server);
- Composer v2 install on your machine (docker or server);
Let’s start by creating a new Symfony 6 project using the Symfony CLI:
symfony new my_project_directory --version="6.1.*" --webapp
More details about Symfony CLI installation or composer you can find here.
Then go to the project folder:
cd my_project_directory
Then we will import Webpack into the Symfony project:
composer require symfony/webpack-encore-bundle
Then we install Webpack dependencies with Yarn:
yarn install
Rename app.css file in assets/styles/ folder to app.scss
Edit in the app.js file:
// ... import './styles/app.scss'; // ...
Go to the webpack.config.js file at the root of the Symfony project, then remove “//” before .enableSassLoader() to activate the SassLoader
Then install the SassLoader with yarn:
yarn add sass-loader node-sass --save-dev
Then modify as below the twig template file at the location templates/base.html.twig:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>{% block title %}Welcome!{% endblock %}</title> <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 128 128%22><text y=%221.2em%22 font-size=%2296%22>⚫️</text></svg>"> {# Run `composer require symfony/webpack-encore-bundle` to start using Symfony UX #} {% block stylesheets %} {{ encore_entry_link_tags('app') }} {% endblock %} {% block javascripts %} {{ encore_entry_script_tags('app') }} {% endblock %} </head> <body> {% block body %}{% endblock %} </body> </html>
Then we can check the status of the project using the compilation:
yarn encore dev
Then we can install Bootstrap in the Symfony project with yarn:
yarn add bootstrap --dev
Finally modify the app.js file again as below:
/* * Welcome to your app's main JavaScript file! * * We recommend including the built version of this JavaScript file * (and its CSS file) in your base layout (base.html.twig). */ // any CSS you import will output into a single css file (app.scss in this case) import './styles/app.scss'; // start the Stimulus application import './bootstrap';
We will then create a custom scss file that we will place in the /assets/styles folder called custom.scss
Then we will modify the structure of the app.scss file as below:
@import "custom"; @import "~bootstrap/scss/bootstrap"; body { background-color: lightgray; }
Then we can build our sass file.
yarn encore dev
Finally we can make a test controller to check that Bootstrap works:
symfony console make:controller Test
Modify a page of the new Controller with Bootstrap in it (example the file templates/test/index.html.twig):
<div class="container-fluid"> <div class="row"> <div class="col-4"></div> <div class="col-4"> <h1 class="text-center my-4">Test de Bootstrap</h1> <a href="" class="btn btn-primary">test</a> </div> <div class="col-4"></div> </div> </div>
Start the web server and connect to the project:
symfony serve -d
Sources:
Webpack : https://webpack.js.org/concepts/
Symfony : https://symfony.com/doc/current/index.html
Bootstrap : https://getbootstrap.com/docs/5.2/getting-started/introduction/