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!