How to use twitter bootstrap using assetic and less in symfony2?

11,842

Finally I've used simply js and css files from bootstrap, without any bundle in symfony because it's faster, easier and may have some advantages such as any update of bootstrap will not crash my site (see update bootstrap 2 to 3...).

So thanks to all for your answers but this is for me best solution.

Share:
11,842
zelazowy
Author by

zelazowy

PHP programmer interested in new technologies, code optimization and self-development.

Updated on June 17, 2022

Comments

  • zelazowy
    zelazowy almost 2 years

    I can't get twitter bootstrap working. I know there is many tutorials and so on, but none of it works for me...

    My composer.json is:

    "require":
        [...]
        "leafo/lessphp": "dev-master",
        "braincrafted/bootstrap-bundle": "dev-master",
        "twbs/bootstrap": "2.3.*"
    

    My assetic configuration is:

    # Assetic Configuration
    assetic:
        filters:
            lessphp:
                file: %kernel.root_dir%/../vendor/leafo/lessphp/lessc.inc.php
                apply_to: "\.less$"
            cssrewrite: ~
        assets:
            bootstrap_css:
                inputs:
                    - %kernel.root_dir%/../vendor/twbs/bootstrap/less/bootstrap.less
                    - %kernel.root_dir%/../vendor/twbs/bootstrap/less/responsive.less
                filters:
                    - lessphp
                    - cssrewrite
                output: css/bootstrap.css
            bootstrap_js:
                inputs:
                    - %kernel.root_dir%/../vendor/twbs/bootstrap/js/bootstrap-transition.js
                    - %kernel.root_dir%/../vendor/twbs/bootstrap/js/bootstrap-alert.js
                    - %kernel.root_dir%/../vendor/twbs/bootstrap/js/bootstrap-button.js
                    - %kernel.root_dir%/../vendor/twbs/bootstrap/js/bootstrap-carousel.js
                    - %kernel.root_dir%/../vendor/twbs/bootstrap/js/bootstrap-collapse.js
                    - %kernel.root_dir%/../vendor/twbs/bootstrap/js/bootstrap-dropdown.js
                    - %kernel.root_dir%/../vendor/twbs/bootstrap/js/bootstrap-modal.js
                    - %kernel.root_dir%/../vendor/twbs/bootstrap/js/bootstrap-tooltip.js
                    - %kernel.root_dir%/../vendor/twbs/bootstrap/js/bootstrap-popover.js
                    - %kernel.root_dir%/../vendor/twbs/bootstrap/js/bootstrap-scrollspy.js
                    - %kernel.root_dir%/../vendor/twbs/bootstrap/js/bootstrap-tab.js
                    - %kernel.root_dir%/../vendor/twbs/bootstrap/js/bootstrap-typeahead.js
                    - %kernel.root_dir%/../vendor/twbs/bootstrap/js/bootstrap-affix.js
                output: js/bootstrap.js
    

    And finally ::base.html.twig:

    {% block stylesheets %}
        <link rel="stylesheet" href="{{ asset('css/bootstrap.css') }}">
    {% endblock %}
    
    {% block javascripts %}
        <script src="{{ asset('js/bootstrap.js') }}"></script>
    {% endblock %}
    

    I'm trying include js ans css with different ways, for example:

    {% stylesheets '%kernel.root_dir%/../vendor/twbs/bootstrap/less/bootstrap.less' %}
        <link rel="stylesheet" href="{{ asset_url }}" />
    {% endstylesheets %}
    

    or

    {% stylesheets '@bootstrap_css' %}
        <link rel="stylesheet" href="{{ asset_url }}" />
    {% endstylesheets %}
    

    but it still not working and I'm getting 404 errors for bootstrap.css and bootstrap.js.

    Whats wrong with my config? I'm using wamp server on windows 7 64bit.

    The only way to get it working was to use cli command assetic:dump but I think it's not correct way to do this on dev environment.