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.

Solution 1

The Symfony Best Practies gives the answer for this Problem: https://symfony.com/doc/current/best_practices.html#web-assets

If you are developing an application like this, you should use the tools that are recommended by the technology, such as Bower and GruntJS. You should develop your frontend application separately from your Symfony backend (even separating the repositories if you want).

In our project we use grunt to build and concat those files into the web-folder.

Solution 2

It looks like that this no longer works in Symfony3.

In Symfony3 the following should work:

twig:
    form_themes: ['bootstrap_3_layout.html.twig']

Solution 3

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

Solution 4

Since Symfony v2.6 includes a new form theme designed for Bootstrap 3 oficial documentation

# app/config/config.yml
twig:
    form:
        resources: ['bootstrap_3_layout.html.twig']
        # resources: ['bootstrap_3_horizontal_layout.html.twig']

Solution 5

From this link https://coderwall.com/p/cx1ztw/bootstrap-3-in-symfony-2-with-composer-and-no-extra-bundles (and changing twitterfor twbs) this is what I have in my config.yml:

assetic:
    debug:          '%kernel.debug%'
    use_controller: '%kernel.debug%'
    filters:
        cssrewrite: ~
        jsqueeze: ~
        scssphp:
            formatter: 'Leafo\ScssPhp\Formatter\Compressed'
    assets:
        jquery:
            inputs:
                - %kernel.root_dir%/../vendor/components/jquery/jquery.js
        bootstrap_js:
            inputs:
                - %kernel.root_dir%/../vendor/twbs/bootstrap/dist/js/bootstrap.js
        bootstrap_css:
            inputs:
                - %kernel.root_dir%/../vendor/twbs/bootstrap/dist/css/bootstrap.css
                - %kernel.root_dir%/../vendor/twbs/bootstrap/dist/css/bootstrap-theme.css
            filters: [ cssrewrite ]
        bootstrap_glyphicons_ttf:
            inputs:
                - %kernel.root_dir%/../vendor/twbs/bootstrap/dist/fonts/glyphicons-halflings-regular.ttf
            output: "fonts/glyphicons-halflings-regular.ttf"
        bootstrap_glyphicons_eot:
            inputs:
                - %kernel.root_dir%/../vendor/twbs/bootstrap/dist/fonts/glyphicons-halflings-regular.eot
            output: "fonts/glyphicons-halflings-regular.eot"
        bootstrap_glyphicons_svg:
            inputs:
                - %kernel.root_dir%/../vendor/twbs/bootstrap/dist/fonts/glyphicons-halflings-regular.svg
            output: "fonts/glyphicons-halflings-regular.svg"
        bootstrap_glyphicons_woff:
            inputs:
                - %kernel.root_dir%/../vendor/twbs/bootstrap/dist/fonts/glyphicons-halflings-regular.woff
            output: "fonts/glyphicons-halflings-regular.woff"

I do have other dependencies in my composer.json like jsqueeze for example, or Leafo's scss processor, among jquery and more. I have this in my composer file:

    "components/font-awesome": "^4.7",
    "components/jquery": "^3.1"
    "leafo/scssphp": "^0.6.7",
    "patchwork/jsqueeze": "^2.0",
    "symfony/assetic-bundle": "^2.8",
    "twbs/bootstrap": "^3.3",

I then use it like this for the css:

{% stylesheets
    '@bootstrap_css'
    'my/other/scss_file1.scss'
    'my/other/scss_file2.scss'

    filter='scssphp,cssrewrite'
    output='css/HelloTrip.css' %}

    <link href="{{ asset_url }}" type="text/css" rel="stylesheet"/>

{% endstylesheets %}

and for the javascripts, place jquery first:

{% javascripts
    '@jquery'
    '@bootstrap_js'
    'my/other/js_file1.js'
    'my/other/js_file2.js'

    filter='?jsqueeze'
    output='js/HelloTrip.js' %}

    <script src="{{ asset_url }}"></script>

{% endjavascripts %}

I then use bin/console assetic:dump to compile all my assets.

Hope to help!

View more solutions

Comments

[Wickramaranga]

Is the same true for symphony 3?

[Roger Guasch]

Yes, the difference between sf3 and sf2.8 (latest LTS) is that in symfony 3 doesn't have the deprecated calls that sf2.8 has. Why I recive "-1" puntuation?

[Wickramaranga]

Thanks, and I didn't you give -1. I gave +1, now. :)

[Wickramaranga]

Doesn't work! [Symfony\Component\Config\Definition\Exception\InvalidConfig‌​urationException] Unrecognized option "form" under "twig"

[Wickramaranga]

This ensures that forms are created with bootstrap classes and other attributes, but we have to attach the bootstrap files by ourselves.

[Aquarion]

This is a great answer for Symfony2, but is no longer appropriate for the Symfony 3 version the question is asking about.

[mr.d]

That is the correct way of adding Bootstrap to Symfony 4.* app

[Siavas]

What version are you using @FabianoLothor?

[FabianoLothor]

Symfony Version 5