Uncategorized

How to enable Bootstrap in Symfony 6 project

by staff

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/