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

zelazowy picture zelazowy · Sep 24, 2013 · Viewed 11.8k times · Source

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.

Answer

zelazowy picture zelazowy · Oct 16, 2013

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.