Simplicity is the ultimate sophistication. - Leonardo da Vinci

Twitter Bootstrap in Visual Studio 2010 with Chirpy and Dotless

For my latest side project, I decided to play around with ASP.NET MVC 4 and Twitter Bootstrap. Bootstrap is a  front-end toolkit open sourced by Twitter engineers, and comes chock-full of goodies like a responsive grid framework, LESS, jQuery plugins and CSS3 styling.

I’ve heard a lot about CSS compilers like Sass and LESS, but thought I would start with LESS first simply because I didn’t have to learn any new syntax. When using LESS in Visual Studio you essentially have three options for compiling:

  • Client-side (JavaScript) – Include the LESS.js script in your site and link directly to your .less files. The script will compile your LESS into CSS at runtime. Unfortunately, this means any errors will cause your CSS files to vomit on your live site.
  • Server-side (dotless) – Install via NuGet or GitHub. Compiles dynamically via ASP.NET HttpHandler or compiler .EXE. The compiler will convert your .less files into .css files.
  • Server-side (Chirpy) – Install via Codeplex (NuGet packages are out of date). This VS add-in not only compiles LESS files it also minimizes JS, CSS, LESS files. You name your LESS files with a .chirp.less extension and Chirpy will compile them in realtime. You can also use a .less.css extension so you can retain Intellisense for CSS.

Installing Twitter Bootstrap
I installed two NuGet packages, the Bootstrap, from Twitter package for the base files and then the Bootstrap, from Twitter Less Source package since I wanted to use LESS. It created /less and /images subfolders under the standard /Content folder in MVC, and loaded the appropriate files from Bootstrap. It added bootstrap.js and less.min.js to the /Scripts folder.

Installing Chirpy
Chirpy’s minify capabilities seemed like a good deal in addition to the LESS compilation so I installed the NuGet package. According to the Chirpy documentation and this blog post  from John Hoff (The Brain Donor) on using Chirpy, I set up file groups to “mash” the files together into single .css files which I could then reference from my site. I created a file called


and put it in the /Content folder. Here’s what the file contained:

  <FileGroup Name="style.css">
    <File Path="less/bootstrap.less" />
    <File Path="less/responsive.less" />

Bootstrap.less and response.less import and load all of the individual .less files included in Bootstrap, so they were the only ones I needed to include.

I also created a file to mash together my JavaScript files. I named the file


and put it in the /Scripts folder. Here is what it contained:

  <FileGroup Name="site.js">
    <File Path="AjaxLogin.js" />
    <File Path="bootstrap.min.js" Minify="false" />
    <File Path="jquery-1.6.2-vsdoc.js" />
    <File Path="jquery-ui-1.8.11.min.js" Minify="false"/>
    <File Path="jquery.validate.min.js" Minify="false"/>
    <File Path="knockout-2.0.0.js" />
    <File Path="less.min.js" Minify="false"/>

I then saved, and nothing happened. No magical .css or .js file appeared underneath my special chirp.config files. No errors. Even after I rebuilt the solution, it was eerily Chirpy silent. Something was wrong. So, since Chirpy was technically an Add-In, I went to the Add-Ins menu in Visual Studio and Chirpy was not there! I then poked around on the interwebs and realized the NuGet packages were NOT up to date. So I went ahead and downloaded the .vsi file from Codeplex and installed Chirpy the old-fashioned way.

Almost immediately, my compiled .css file appeared, along with a whole host of CSS errors from the Bootstrap LESS files. I turned to Google, and it led me to lo and behold, another post from John Huff about Twitter Bootstrap woes with Chirpy. Apparently the Chirpy compiler does not like the Bootstrap LESS. His recommended solution was to use the dotless library to compile the LESS files and then use Chirpy to mash and minimize the files.

Installing dotless
So I installed dotless via NuGet. Following the instructions in Huff’s blog post, I added two calls to the dotless .EXE compiler in my MVC project’s Pre-build events (Project -> Properties -> Build Events tab):



I included quotations around both the .exe and the source and target file paths because my solution and project directories both contain spaces in the path folder names. I created a /css subfolder in my /Content directory to hold the generated .css files. After doing an initial build, I navigated to the /css folder, saw the two new files (with shiny CSS culled from all those Bootstrap LESS files), and added them to my VS project.

Updating Chirpy
I then updated my mash.less.chirp.config file to mash together the newly compiled .css files instead:

  <FileGroup Name="style.css">
    <File Path="css/bootstrap.css" />
    <File Path="css/responsive.css" />

And voila, my style.min.css file appeared within a few seconds after saving and building the project, and it included the minified CSS from both .css files! I then updated my site template to use “style.min.css” as my stylesheet.

Sure, it would have been nice to only have to use Chirpy, but since I really wanted to use Bootstrap for this project, and for some reason Bootstrap and Chirpy just don’t get along at the moment, this is a perfectly fine workaround for the time being.


  1. Jake says:

    Thanks for the article!

    A quicker (and lazier) workaround is to just combine Bootstrap’s LESS files into one LESS file. This allows Chirpy to do it’s magic without issue.

  2. Tomas says:

    I don’t get it to work 100 %. The problem is the second time of file generation. The css files bootstrap.css and responsive.css will be generated but not the site.min.css, so I don’t get the changes.

  3. Ann says:

    @Jake, I will have to try that. Not sure if it will fix the CSS errors I was getting, but worth a shot!

    @Tomas, does your chirp.config file point to the new bootstrap.css and responsive.css files? Is Chirpy generating any other files (js or other less files elsewhere in your project)?

  4. Paul Knopf says:

    You could also use Combres to build the Twitter Bootstrap less files. Combres will not only build it, it will also compress and cache. The default dotless filter that comes with Combres doesn’t work with Twitter Bootstrap, but I wrote a filter that uses dotless in a way that allows it to work. You can find the project on NuGet called “Adept.Combres”.

    The blog post about it is here.

    If you visit the project on GitHub, you can see a sample site of using Combres with Twitter Bootstrap less files.


  5. Paul Knopf says:

    You could also use Combres to build the Twitter Bootstrap less files. Combres will not only build it, it will also compress and cache. The default dotless filter that comes with Combres doesn’t work with Twitter Bootstrap, but I wrote a filter that uses dotless in a way that allows it to work. You can find the project on NuGet called “Adept.Combres”.

    The blog post about it is here.

    If you visit the project on GitHub, you can see a sample site of using Combres with Twitter Bootstrap less files.


  6. Mr. S says:

    The newer versions of dotLess provide minification, as well. It’s great because I can directly reference my .less files from my markup (instead of css), and the dotLess handler will serve a minified, cached version. You can enable it from your web.config via:

  7. Mr. S says:

    Looks like my markup was stripped, <dotless minifyCss=”false” cache=”true” />

  8. Andy says:

    I’m getting an error from DotLess when I build the project: “exited with code 1″.
    I’m using VS 2012, did you try with it?

  9. NickB says:

    Doesn’t 4.5 have support for combining all your JS and CSS into one file natively ?

  10. lesscss says:

    very helpfull thanx tutorial.

  11. Tom says:

    There’s a similar tutorial on building Bootstrap when you publish a project here:

  12. How Efficient Are Mole Removal Lotions

  13. Marilou says:

    a Bruce Lee workout includes stretching, bending, running, dipping,
    kicking, jumping, traditional muscle building exercises, weight lifting,
    rope skipping, medicine ball handling, etc. Anyone who dares
    to make a closer inspection will find the underlying difference.
    Now, the average healthy amount people are supposed to lose is 2 pounds per

  14. Tommie says:

    Both drugs have also been denied FDA approval the
    first time around and are awaiting news on their second attempt.
    Authorities inside the area will need to have an intensive understanding of laboratory and labeling techniques, infection security precautions, appropriate blood attract approaches to the elderly and for infants and
    even more. Do not be tempted to lose weight as quickly as you
    can, because a crash diet will have you eating less
    than a thousand calories a day slowing down your metabolism.

  15. Harley says:

    You don’t have to hit the gym for two and three hours each day to lose weight, but it does help to squeeze in 30 minutes of physical activity each day. Withdrawal from levothyroxine can be done but it takes 6 weeks of withdrawal for the remaining thyroid tissue to be completely starved. That way, the actual process will end up being much less frustrating and, for the majority of people, enjoyable.

  16. Hey there would you mind letting me know which webhost you’re using?

    I’ve loaded your blog in 3 different web browsers and I must say this blog loads a lot quicker then most.

    Can you suggest a good internet hosting provider at a fair price?
    Many thanks, I appreciate it!

  17. Instead of taking a cart for 18 holes, walk the first 9 holes and then get a cart.

    Just a space and time together to see what unfolded.
    The forts that most of the parents choose are also
    equipped with the optional Built-in Picnic
    Table for visiting and snacks, tea, coffee, shakes, etc.

  18. great issues altogether, you simply gained a new reader.
    What could you suggest in regards to your publish
    that you just made some days in the past? Any positive?

  19. Pretty! This was a really wonderful post. Thanks for providing this information.

  20. Andrew says:

    Some cards require a month to month fee and some cards are good for a year with a one-time
    payment. What this really means is that every pet should have a veterinary oral evaluation and
    dental cleaning every year ‘” before problems are seen. Patients can easily access Ninth East Dental’s blog via the practice’s website.

  21. Caprice A. says:

    My favorite Model is
    Anita Silver

  22. test2 says:

    Post writing is also a excitement, if you know afterward
    you can write if not it is complex to write.

  23. Boomer says:

    You’ve got to be kidding me-it’s so trnsrpaneatly clear now!

  24. xt_blog says:

    I was suggested this website by my cousin. I’m not sure whether this post is
    written by him as nobody else know such detailed about my difficulty.
    You are amazing! Thanks!

  25. Charissa says:

    Hi, i feel that i noticed you visited my weblog
    so i came to go back the want?.I am trying to in finding things to enhance
    my web site!I guess its ok to use some of your ideas!!

  26. What’s up, this weekend is fastidious in support of me, as this time
    i am reading this fantastic educational piece of writing
    here at my residence.

  27. Thanks designed for sharing such a pleasant opinion, article is pleasant, thats why
    i have read it entirely

  28. I’m not sure where you are getting your information, bbut great topic.
    I needs to spend somme time learning much more or understanding more.
    Thanks for wonderful info I was looking for this info foor
    myy mission.

  29. Normally I don’t learn article on blogs, but I would like to say that this write-up
    very forced me to try and do so! Your writing style has been amazed me.
    Thank you, very nice article.

  30. Currently it sounds like Movable Type is the preferred
    blogging platform available right now. (from what I’ve read) Is that what you are using on your blog?

  31. Pretty nice post. I just stumbled upon your weblog and wanted to say that I have truly enjoyed surfing around your blog posts.
    In any case I’ll be subscribing to your rss feed and I hope you write
    again very soon!

  32. Amazon says:

    This post is truly a pleasant one it helps new internet people, who are
    wishing for blogging.

  33. Herman says:

    Hey there I am so delighted I found your site, I really
    found you by mistake, while I was looking
    on Google for something else, Anyhow I am
    hee now and would just like to say thanks a lot for a tremendous
    post and a all round enjoyable blog (I also love the theme/design), I don’t
    have time to read through it all at the moment but I have bookmarked it and also included your RSS feeds, so
    when Ihave time I will be back to read a lot more, Please do
    keep up the excellent work.

  34. There are even entire theme restaurants based around playing video games.
    When you are a gamer mom to fit the game. Your $350 will let you know little about is candy crush saga cheats that?
    However, if not all games much more games you want to make servers of their students” acting out the manufacturer codes preinstalled. Know when to shut the game discs you may end up wasting a lot of people.


  1. Anant Leaves says:

    Twitter Bootstrap in Visual Studio 2010 with Chirpy and Dotless…

    Thank you for submitting this cool story – Trackback from Anant Leaves…

Speak Your Mind