What is the correct way to add bootstrap to a symf

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 encore
yarn install
yarn add bootstrap --dev

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

Answer 2

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!

Answer 3

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']

Answer 4

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

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.

Answer 5

As an alternative solution, the symlinks could be created automatically upon packages update. For example, in composer.json add new command in "post-update-cmd":

// ...
"scripts": {
        "post-install-cmd": [
            "@symfony-scripts"
        ],
        "post-update-cmd": [
            "@symfony-scripts",
            "rm web/bootstrap && ln -s -r `pwd`/vendor/twbs/bootstrap/dist/ web/bootstrap"
        ]
    },

Answer 6

It looks like that this no longer works in Symfony3.

In Symfony3 the following should work:

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