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.jsThis 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à!
Written by Bruno Vitorino
Related protips
11 Responses
Hi,
Now that Symfony 2.6 uses a bootstrap theme for rendering the forms, does this fact modifies your approach ?
Thank you
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.
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.
@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
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. :)
Thank you! Very useful, helped me to setup a clean install
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!!!
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?
@Holliver, check if app\config\config.yml is correctly formatted, and no spaces mixed with tabs for indentation.
I have my custom bootstrap theme. So, How to integrate that ?? I have to compulsory install bootstrap through composer ??
@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') }}" >
