cx1ztw
Last Updated: September 23, 2016
·
27.01K
· ohvitorino
 hrofu9o

Bootstrap 3 in Symfony 2 with Composer and no extra bundles

While trying to integrate Twitter Bootstrap with Symfony2 framework I came across quite some articles and SO questions referring to the usage of bundles. Although I have nothing against bundles, I came to this solution avoiding them. Mainly because I couldn't make it work properly using the bundle approach...

First you need to add the dependencies to your composer.json file:

"require": {
    ...
    "twitter/bootstrap": "3.*",
    "components/jquery": "1.11.1"
}

Now, add the following to your app\config\config.yml, in order to make Assetic to manage your application assets:

# Assetic Configuration
assetic:
    debug:          "%kernel.debug%"
    use_controller: false
    bundles:        [ '*Place your bundle names here*' ]

    filters:
        cssrewrite: ~
    assets:
        bootstrap_js:
            inputs:
                - %kernel.root_dir%/../vendor/twitter/bootstrap/dist/js/bootstrap.js
        bootstrap_css:
            inputs:
                - %kernel.root_dir%/../vendor/twitter/bootstrap/dist/css/bootstrap.css
                - %kernel.root_dir%/../vendor/twitter/bootstrap/dist/css/bootstrap-theme.css
            filters: [cssrewrite]

        bootstrap_glyphicons_ttf:
            inputs:
                - %kernel.root_dir%/../vendor/twitter/bootstrap/dist/fonts/glyphicons-halflings-regular.ttf
            output: "fonts/glyphicons-halflings-regular.ttf"
        bootstrap_glyphicons_eot:
            inputs:
                - %kernel.root_dir%/../vendor/twitter/bootstrap/dist/fonts/glyphicons-halflings-regular.eot
            output: "fonts/glyphicons-halflings-regular.eot"
        bootstrap_glyphicons_svg:
            inputs:
                - %kernel.root_dir%/../vendor/twitter/bootstrap/dist/fonts/glyphicons-halflings-regular.svg
            output: "fonts/glyphicons-halflings-regular.svg"
        bootstrap_glyphicons_woff:
            inputs:
                - %kernel.root_dir%/../vendor/twitter/bootstrap/dist/fonts/glyphicons-halflings-regular.woff
            output: "fonts/glyphicons-halflings-regular.woff"

        jquery:
            inputs:
                - %kernel.root_dir%/../vendor/components/jquery/jquery.js

This will also make sure your bootstrap.css will find the beloved glyphicons in the fonts folder.

Now, to include the assets in your layouts, you can edit for example, ::base.html.twig

<head>
    ...
    {% stylesheets '@bootstrap_css' %}
        <link rel="stylesheet" type="text/css" media="screen" href="{{ asset_url }}"/>
    {% endstylesheets %}
</head>
<body>
    ....
    {% javascripts '@jquery' '@bootstrap_js' %}
        <script type="text/javascript" src="{{ asset_url }}"></script>
    {% endjavascripts %}
</body>

And Voilà!

Say Thanks
Respond

11 Responses
Add your response

17741
None

Hi,

Now that Symfony 2.6 uses a bootstrap theme for rendering the forms, does this fact modifies your approach ?

Thank you

over 1 year ago ·
17751
 hrofu9o

I didn't have a good look at it yet, but it looks like the rendering of forms only adds class names to the forms. Therefore, I guess we still have to make the framework some how available in our application, as it's done in my method, through a bundle or some other solution.

over 1 year ago ·
17789
None

Thanks for this useful tutorial. I've just decided it's not worth to include whole new bundle to just use Bootstrap in Symfony, so I really appreciate that you have written this post.

However there are 2 bugs I've discovered including Bootstrap to Symfony (ver. 2.5.8):

You have to first include jQuery and then Bootstrap JS files.

Somehow if I've used Bootstrap version 3.2 there was some issue loading "bootstrap-theme.css.map" but I've handled this by requiring Bootstrap 3.* (so newest version - 3.3.1 as for now) which helped immediately.

over 1 year ago ·
17793
 hrofu9o

@poldas Thanks for your comment. Indeed the order of the library's inclusion is important and therefore we need to place bootstrap after jquery. Good catch! I had fixed it in my code but not here.
Indeed there seems to be a problem with the .css.map file, but it doesn't seem to occur when you run your application in production mode. Nevertheless I'll follow your comment and change it to the newest bootstrap version.
Cheers

over 1 year ago ·
18148
None

Great tutorial and exactly what I needed. One step for the uninitiated, however: Make sure you run composer install once you are done mucking around. :)

over 1 year ago ·
19320
None

Thank you! Very useful, helped me to setup a clean install

over 1 year ago ·
22654
None

Graciass!!! Me salvaste la vida jajaja. Hay alguna manera de insertar una plantilla de bootstrap-twig en el symfony? Donde las puedo buscar? MUCHAS GRACIAS!!!

over 1 year ago ·
24177
None

hello,
after install I have this error:
An exception has been thrown during the compilation of a template ("There is no "bootstrap_css" asset.") in "layout.html.twig".
what can I do?

over 1 year ago ·
24181
 hrofu9o

@Holliver, check if app\config\config.yml is correctly formatted, and no spaces mixed with tabs for indentation.

over 1 year ago ·
27821

I have my custom bootstrap theme. So, How to integrate that ?? I have to compulsory install bootstrap through composer ??

12 months ago ·
28180
 hrofu9o

@Sufiyan The easiest way is to put your css and js in the web folder and include them in your twig templates with the tag <link href="{{ asset('bootstrap-theme/bootstrap-custom.css') }}" >

9 months ago ·