kzyiaw
Last Updated: May 25, 2016
·
45.45K
· jverdeyen
E40b946f8a5d22e9c61629df7ab0111c

Use Twitter Bootstrap in Symfony2 with Composer

UPDATE

** An updated version can be found here ** https://www.jverdeyen.be/symfony2/bootswatch-bootstrap-symfony2/

A small getting-started guide on how to use/install Twitter Bootstrap in a Symfony2 project.

composer.json

First of all, add the twitter bootstrap repository into your composer.json

"repositories": [
    {
       "type": "package",
       "package": {
           "version": "2.2.1",
           "name": "twitter/bootstrap",
           "source": {
               "url": "https://github.com/twitter/bootstrap.git",
               "type": "git",
               "reference": "master"
           },
           "dist": {
               "url": "https://github.com/twitter/bootstrap/zipball/master",
               "type": "zip"
           }
       }
    }
]

you might also want to add the jquery repository as you will need this to run the bootstrap js files

Add the following in your required section

"require": {
     ..
   "symfony/assetic-bundle": "2.1.*", 
   "leafo/lessphp": "*",
   "twitter/bootstrap": "*",

    ...
},

Run composer update to get the packages you need.

config.yml

I prefer using a separate assetic.yml and include this in your config.yml file.

You will have to download cssembed and yuicompressor.
cssembed
yuicompressor

assetic:
  java: /usr/bin/java
  filters:
    cssembed:
      jar: %kernel.root_dir%/Resources/java/cssembed-0.4.5.jar
    yui_js:
      jar: %kernel.root_dir%/Resources/java/yuicompressor.jar
    lessphp:
      file: %kernel.root_dir%/../vendor/leafo/lessphp/lessc.inc.php
      apply_to: "\.less$"
  assets:
    jquery_js:
        inputs:
            - '%kernel.root_dir%/app/Resources/public/js/vendor/jquery.js'
        filters: [?yui_js]
    bootstrap_js:
        inputs:
            - '%kernel.root_dir%/../vendor/twitter/bootstrap/js/bootstrap-transition.js'
            - '%kernel.root_dir%/../vendor/twitter/bootstrap/js/bootstrap-alert.js'
            - '%kernel.root_dir%/../vendor/twitter/bootstrap/js/bootstrap-modal.js'
            - '%kernel.root_dir%/../vendor/twitter/bootstrap/js/bootstrap-dropdown.js'
            - '%kernel.root_dir%/../vendor/twitter/bootstrap/js/bootstrap-scrollspy.js'
            - '%kernel.root_dir%/../vendor/twitter/bootstrap/js/bootstrap-tab.js'
            - '%kernel.root_dir%/../vendor/twitter/bootstrap/js/bootstrap-tooltip.js'
            - '%kernel.root_dir%/../vendor/twitter/bootstrap/js/bootstrap-popover.js'
            - '%kernel.root_dir%/../vendor/twitter/bootstrap/js/bootstrap-button.js'
            - '%kernel.root_dir%/../vendor/twitter/bootstrap/js/bootstrap-collapse.js'
            - '%kernel.root_dir%/../vendor/twitter/bootstrap/js/bootstrap-carousel.js'
            - '%kernel.root_dir%/../vendor/twitter/bootstrap/js/bootstrap-typeahead.js'
            - '%kernel.root_dir%/../vendor/twitter/bootstrap/js/bootstrap-affix.js'
        filters: [?yui_js]
    bootstrap_less:
        inputs:
            - '%kernel.root_dir%/../vendor/twitter/bootstrap/less/bootstrap.less'
        filters: [lessphp,cssembed]

layout.html.twig

To get this thing rollin' we need to add these assets into our layout template (or any other)

{% block javascripts %}
  {% javascripts '@jquery_js' '@bootstrap_js' filter='?yui_js' combine=true %}
     <script src="{{ asset_url }}"></script>
  {% endjavascripts %}
{% endblock %}

{% block stylesheets %}
  {% stylesheets '@bootstrap_less' combine=true %}
    <link href="{{ asset_url }}" type="text/css" rel="stylesheet" />
 {% endstylesheets %}
{% endblock %}

This should do the trick!

Say Thanks
Respond

18 Responses
Add your response

3513
2eb06ff4a5382ffb856be17db1be283d

Thank you! You're the man!

over 1 year ago ·
3514
2eb06ff4a5382ffb856be17db1be283d

Do you know how i can include those touch icons:

<link rel="apple-touch-icon-precomposed" sizes="144x144" href="../assets/ico/apple-touch-icon-144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="../assets/ico/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="../assets/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="../assets/ico/apple-touch-icon-57-precomposed.png">
<link rel="shortcut icon" href="../assets/ico/favicon.png">

over 1 year ago ·
3637
E40b946f8a5d22e9c61629df7ab0111c

How do you mean?

over 1 year ago ·
3672
2eb06ff4a5382ffb856be17db1be283d

I already found a solution. Thanks.

over 1 year ago ·
4534
Adff15dbca8dca5d74d761f67fa68fc8

Good article!

By the way, you don't have to add the twitter bootstrap into your repository as it already exists in Packagist repository, i.e. you only need to add it to the requrie section:
require: "twitter/bootstrap": "dev-3.0.0-wip"

over 1 year ago ·
7150
Dc8f792c1e992181536380df5d5dbd3d

This seems like a good approach but how do you then go about modifying/overriding Bootsrap Less in your own bundle? I was planing to keep all my less and bootstrap less files in one less subdirectory and import the bootstrap less and my own less files in to one master file

over 1 year ago ·
7302
5cde03bd1e4b698f0c40b5327eea33d8

Man! You ROCKS! Thank you so much!

over 1 year ago ·
7325
E40b946f8a5d22e9c61629df7ab0111c

I should update this pro tipsooner or later, indeed using packagist etc.
Note that there are also repositories with bootstrap bundles..

over 1 year ago ·
9693

Where would I put the cssembed and yuicompressor jar files?

over 1 year ago ·
9720
E40b946f8a5d22e9c61629df7ab0111c

@imjeremulle
You can put these jars wherever you want, most of the time I just put them into app/Resources/java/.. but that doesn't matter. These are used for all bundles so it's best to place them in your global Resources.

over 1 year ago ·
10715
Avatar magrite sq normal

Great, thank you! Just what I needed

But I've the same problem @richlove1 commented. How do I come to include a 'custom.less' on my own bundle, been able to access from it to the variables and mixins on the vendor/twitter/bootstrap directory. I can't find a way

over 1 year ago ·
12871
Aaa388991a11d0173cc710f021f9ef93

Great Article.

Thanks!

over 1 year ago ·
13452
6e952357162c040e98605ef5f57d205e

it does not work

over 1 year ago ·
14263
0 uuv 7s7l0yc5wc6wmdnt7jrqjm5iwt6wawts7jd9gylvn9adhe5o3mg41clzhvf5s7b28ybacqyq

Hi thanks for sharing knowledge i have noticed that this post is most popular among all other post on bootstrap and symfony
i am totally new to symfony2 i have question about your post why we need to do all the things like config.yml , cssembed yuicompressor can we just simply copy bootstrap css and js to resource folder and just linked to main template
e.g:
<link href="{{ asset('css/bootstrap.min.css') }}" rel="stylesheet" type="text/css" />
<script src="{{ asset('js/jquery-1.11.0.min.js') }}" ></script>
<script src="{{ asset('js/bootstrap.min.js') }}" ></script>

i know it is stupid question for you but i am confused about that why we need to long coding and what is benefits of it ?

Thank you very much
Vishal

over 1 year ago ·
15428
E40b946f8a5d22e9c61629df7ab0111c

I'm rewriting this in a blog post. I'll post it here for an update.

over 1 year ago ·
15721
637ab45a810d6286bfa97ff77b505eaa

I've been confused with not getting less files compiled in windows. I found that java location should be C:\Program Files\Java\jre7\bin\java.exe then its working fine. Think this will help windows users. Thanks for the guide.

over 1 year ago ·
16932
E40b946f8a5d22e9c61629df7ab0111c

I've created an updated version, which can be found here:
https://www.jverdeyen.be/symfony2/bootswatch-bootstrap-symfony2/

over 1 year ago ·
27671

To just load CSS and JS from the vendor into the view using assetic:
https://gist.github.com/elvisciotti/7e25185d1398779a13505a77b3c2adec

over 1 year ago ·