mCzolko/TwitterBootstrap2Symfony2.md

## TwitterBootstrap2Symfony2.md

      
    Raw
  

              TwitterBootstrap2Symfony2.md
            
          
    Installation Twitter Bootstrap to Symfony2 Framework

Step by step to install bootstrap to this awesome framework.
Composer

First of all. Add dependency to composer.json file.
{
  "require": {
    "twitter/bootstrap": "2.3.*"
  }
}
If you also want to install jQuery using Composer you should add the following configuration to your composer.json.
{
  "repositories": [
    {
      "type": "package",
      "package": {
        "name": "jquery/jquery",
        "version": "1.9.1",
        "dist": {
          "url": "http://code.jquery.com/jquery-1.9.1.js",
          "type": "file"
        }
      }
    }
  ],
  "require": {
    "jquery/jquery": "1.9.*"
  }
}
LESS compilation

You need nodeJS installed, of course.
Go to your project root and install LESS with node package manager (npm):
npm install less

Assetic configuration

You can use Assetic to include the Bootstrap assets in your layout.
# app/config/config.yml
...
# Assetic Configuration
assetic:
    debug:          %kernel.debug%
    use_controller: false
    bundles:        [ ]
    filters:
        less:
            node:       /usr/local/bin/node
            node_paths: [%kernel.root_dir%/../node_modules]
            apply_to:   "\.less$"
        cssrewrite: ~
    assets:
        bootstrap_css:
            inputs:
                - %kernel.root_dir%/../vendor/twitter/bootstrap/less/bootstrap.less
            filters:
                - less
                - cssrewrite
            output: css/bootstrap.css
        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-button.js
                - %kernel.root_dir%/../vendor/twitter/bootstrap/js/bootstrap-carousel.js
                - %kernel.root_dir%/../vendor/twitter/bootstrap/js/bootstrap-collapse.js
                - %kernel.root_dir%/../vendor/twitter/bootstrap/js/bootstrap-dropdown.js
                - %kernel.root_dir%/../vendor/twitter/bootstrap/js/bootstrap-modal.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-scrollspy.js
                - %kernel.root_dir%/../vendor/twitter/bootstrap/js/bootstrap-tab.js
                - %kernel.root_dir%/../vendor/twitter/bootstrap/js/bootstrap-typeahead.js
                - %kernel.root_dir%/../vendor/twitter/bootstrap/js/bootstrap-affix.js
            output: js/bootstrap.js
        jquery:
            inputs:
                - %kernel.root_dir%/../vendor/jquery/jquery/jquery-1.9.1.js
            output: js/jquery.js
...

Base HTML template

Add assetic paths into base.html.twig template located at app/Resources/view/base.html.twig.
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>{% block title %}Welcome!{% endblock %}</title>
        
        <!-- Bootstrap CSS -->
        <link rel="stylesheet" href="{{ asset('css/bootstrap.css') }}">

        {% block stylesheets %}{% endblock %}
        <link rel="icon" type="image/x-icon" href="{{ asset('favicon.ico') }}" />
    </head>
    <body>
        {% block body %}{% endblock %}
        {% block javascripts %}{% endblock %}
        
        <!-- jQuery -->
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
        <script>window.jQuery || document.write('<script src="{{ asset('js/jquery.js') }}"><\/script>')</script>
        
        <!-- Bootstrap JavaScript -->
        <script src="{{ asset('js/bootstrap.js') }}"></script>
    </body>
</html>