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.

Godgiven

Answer 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.

Grandmamma

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

Savdeep

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

Answer 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

Kunming

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

What version are you using @FabianoLothor? – Kunming

Symfony Version 5 – Maldives

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

Sarong

Is the same true for symphony 3? – Godgiven

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? – Sarong

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

Doesn't work! [Symfony\Component\Config\Definition\Exception\InvalidConfigurationException] Unrecognized option "form" under "twig" – Godgiven

Answer 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!

Lahnda

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

Answer 6

If you prefer a very simple approach...

$ composer request twbs/bootstrap

In composer.json...

    "post-update-cmd": [
        "@auto-scripts",
        "@copy-bootstrap"
    ],
    "copy-bootstrap": [
        "bash copy-bootstrap.sh"
    ]

Where copy-bootstrap.sh contains...

mkdir -p public/static/bootstrap
cp -R vendor/twbs/bootstrap/dist public/static/bootstrap

Important! If on windows make sure line endings in .sh file are LF instead of CRLF

Then...

$ composer update

Now in base.html.twig...

    {% block stylesheets %}
        <link href="static/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
    {% endblock %}

    {% block javascripts %}
        <script src="static/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
    {% endblock %}

In index.html.twig...

{% block body %}
<div class="container m-3">
    <div class="row">
        <div class="col-2 border border-dark border-3">
            <h4>1st Row 2 Col</h4>
        </div>
        <div class="col-4 border border-dark border-3">
            <h4>1st Row 4 Col</h4>
        </div>
        <div class="col-6 border border-dark border-3">
            <h4>1st Row 6 Col</h4>
        </div>
    </div>
    <div class="row">
        <div class="col-4 border border-dark border-3">
            <h4>2nd Row 4 Col</h4>
        </div>
        <div class="col-6 border border-dark border-3">
            <h4>2nd Row 6 Col</h4>
        </div>
        <div class="col-2 border border-dark border-3">
            <h4>2nd Row 2 Col</h4>
        </div>
    </div>
</div>
{% endblock %}

Which produces this...

Gunfight

Answer 7

On Windows, you need to adapt AQuirky's solution with this. The other parts are the same.

In composer.json:

"post-update-cmd": [
    "@auto-scripts",
    "@copy-bootstrap"
],
"copy-bootstrap": [
    "cmd /C copy-bootstrap.bat"
]

Where copy-bootstrap.bat contains:

xcopy /E/C/Q/Y/I vendor\twbs\bootstrap\dist public\static\bootstrap

Vale

Answer 8

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"
        ]
    },

Sisto