Work with bootstrap, assetic and less

  • Sharebar

Bootstrap is a well known and powerful front-end framework for fast prototyping, it uses LESS and it can be easily integrate in your Symfony applications with the help of assetic. In this tutorial I’ll show how to:

  • Install bootstrap in you Symfony application
  • Load it using assetic
  • Compile bootstrap LESS files with lessphp

Let’s start with a fresh Symfony2.1 application, the best way to create a new application is using composer:

1
composer create-project symfony/framework-standard-edition bootstrapdemo 2.1.x-dev

After that, we need to install bootstrap within our application, again we will use composer to download and install the source code. Bootstrap doesn’t have a composer package so we’ll need a little bit of extra work to get it done.

Add the repository definition to your composer.json:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
"repositories": [
        {
            "type": "package",
            "package": {
                "name": "twitter/bootstrap",
                "version": "2.1.0",
                "source": {
                    "type": "git",
                    "url": "https://github.com/twitter/bootstrap",
                    "reference": "v2.1.0"
                }
            }
        }
    ]

and then, add bootstrap as a dependency as usual:

1
"twitter/bootstrap": "v2.1.0"

Note:
Mind that we are not installing the latest bootstrap version, but 2.1.0 because of a known issue with lessphp. By the time you read, this could be solved, you should try using “master” instead of “2.1.0″ and see how it goes

Last but not least, we need lessphp in order to be able to compile our boostrap .less files, let’s add to our composer.json:

1
"leafo/lessphp": "dev-master"

Now we can run:

1
composer update twitter/bootstrap leafo/lessphp

This will download needed sources. Fair enough, it’s time to start writing some Symfony code, isn’t it?

Assets management with assetic is well documented in this cookbook, if you are completely new to it I’ll suggest to start from there.

Assetic ships whit a lot of useful filters, we’ll use LessphpFilter, so we need to configure it (some filters require configuration params, some don’t) in config.yml, find assetic section and add:

1
2
3
4
filters:
        lessphp:
            file: %kernel.root_dir%/../vendor/leafo/lessphp/lessc.inc.php
            apply_to: "\.less$"

This will define lessphp path, and will apply the filter to all our .less files. This filter is mandatory for less files, so I usually apply it to all .less files by default. After that, the last thing we need is to include bootstrap in main template:

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

Nothing special here, just mind that we are using absolute path for boostrap file, this allows us to work with vendor files, and that we are not specifying lessphp filter since it will be applied by default for .less files.

And that’s all.

Assetic is a really powerful tool and it can really improve the way you manage and optimize your assets, we are planning to release a premium screencast about advanced assetic usage with twig, if you think you’ll love it give us some feedback and let us know what you should see in it.

Happy coding.

Tags: , , , , ,

Leave your email to be notified for new posts!

  • http://prointernetmarketing.co.uk Chris

    I spent four hours yesterday trying (and failing) to get the MOPA bootstrap bundle working. Then I created a new project, and within 5 mins had bootstrap working perfectly thanks to your instructions.

    Great post, thanks so much for sharing – I’m no designer and so bootstrap is a godsend for me.

  • Darren Black

    Yeah, thanks for this – rolling back to v2.1.0 and the absolute path for the bootstrap files was all i was missing.

  • Dan Ekström

    Hi,

    I have a problem that I can not use the imports % stylesheets, I get an error message about including the bundle in the assetic file??

    I would just like to get started using bootstrap, I don’t have any special requirements.

    • ftassi

      You need to whitelist the bundles that are allowed to use assetic. You should have a bundles key under assetic configuration in config.yml. You can add your bundles to that list or just remove the key if you want to enable assetic for all bundles.

  • http://www.piotrbelina.com Piotr Belina

    Hi,

    The element is missing in the last snippet. I modified it like this:

    {% stylesheets ‘%kernel.root_dir%/../vendor/twitter/bootstrap/less/bootstrap.less’ %}

    {% endstylesheets %}

  • Kathrine

    I spent like million hours trying to get Mopa to work and all for nothing. Your tutorial made it work in couple of minutes. I absolutely love it!
    If I just can make little remark: how about including this line in the tutorial? Makes it all ready to go.
    {% stylesheets
    ‘%kernel.root_dir%/../vendor/twitter/bootstrap/less/bootstrap.less’
    %}
    <link rel="stylesheet" href="{{ asset_url }}" /
    {% endstylesheets %}

    • ftassi

      Done, thank you.

      • ZipZit

        Whoa.. I’ve been spending many many hours trying to make this thing work. For anyone else who may get here… I placed the stylesheet note into my bundle’s layout.html.twig file. Got lots of misleading errors. Turns out you got to place the stylesheet INSIDE the header, not BEFORE it… (well duh!)

        Thank you for posting up the tutorial in the first place.

  • Ben Overmyer

    You are my hero. This worked effortlessly!

  • http://frosas.net/ Francesc Rosàs

    Bootstrap is now in Packagist so we can simply do:

    “leafo/lessphp”: “~0.3″,
    “twitter/bootstrap”: “~2.2″

    in composer.json. Also, specificying the lessphp file is not (longer?) required:

    filters:
    lessphp:
    apply_to: “\.less$”

    • Andrew

      yea, no filters necessary over here…tossed an exception with the filters in the config.yml file

  • http://frosas.net/ Francesc Rosàs

    I’ve found a pair of inconveniences:

    If you want to use one of the Bootstrap variables (like @baseFontSize) in another file you can’t do this:


    {% stylesheets ‘bootstrap.less’ 'main.less' %}

    The solution I came up is to import them from a same file:


    /* imports.less */
    @import "bootstrap.less";
    @import "main.less";

    and load this file then:


    {% stylesheets 'imports.less' %}

    It is worst if you want to change these Bootstrap variables. As they are defined in the variables.less referenced from bootstrap.less, one have to either use a custom bootstrap.less or modify the original bootstrap.less like this:


    @import "variables.less"; // Modify this for custom colors, font-sizes, etc
    @import "../../../css/bootstrap-variables.less";

    but then you can’t use Composer to install Bootstrap for you.

    Not sure which is the less ugly solution.

    PD: Allowing the use of pre tag in the comments would be great :)

    • Error500

      Hi,

      did you find a solution for this problem ?
      another way could be to add a line at the end of variables.less to import the project’s variable file ?

  • http://www.marn.gob.sv/?option=com_content&view=article&id=238 many bridal shops have many formal dresses that wo

    Wow! Thank you! I permanently needed to write on my site something like that. Can I take a part of your post to my website?

    • ftassi

      Feel free to use this post as you want. We would appreciate a link to the original content though

  • http://symfonysymplifyd.blogspot.com/ George

    Video Tutorials for Symfony with Twitter Bootstrap..Project files available for download

  • jm

    Your copy and paste trick is especially annoying with source code!

  • http://www.michaelcinco.com/blog/?p=19 balance transfer credit cards 0 apr

    Hey, I think your blog might be having browser compatibility issues.
    When I look at your blog in Chrome, it looks fine but when opening in Internet
    Explorer, it has some overlapping. I just wanted to give you
    a quick heads up! Other then that, amazing blog!