What is the correct way to add bootstrap to a symfony app?

Question

I'm using symfony framework 3 to develop a web application. I need to add boostrap's functionality to my application. I installed bootstrap using the below command. (I'm using composer.)

composer require twbs/bootstrap

It installs bootstrap to the application's vendor folder. More specifically vendor\twbs\bootstrap.

I need to attach bootstrap's css and js files in the application's twig templates (located in app\Resources\views) as assets.

e.g.:

<link href="{{ asset('css/bootstrap.css') }}" rel="stylesheet" />

But assets only work with files located in the web (web\bundles\framework) folder. I can copy those .css and .js files from the vendor folder to web folder manually to make this work but there should be a proper way to do it (i.e.: to add assets). e.g.: A command with bin/console?

Any help is appreciated.

Answer 1

The suggested approach changed since Symfony version 4: Webpack Encore is used with npm / yarn for bundling the CSS and JavaScript resources, where the Bootstrap framework can be included.

Start by installing Encore and follow with the Bootstrap-specific documentation. In summary, the following commands have to be performed:

composer require symfony/webpack-encore-bundle
yarn install
yarn add bootstrap --dev

# after making the required changes to webpack.config.js, app.js, run Encore
yarn encore dev --watch