Twitter Bootstrap responsive css is not generated form the less files

Question

I've downloaded the .less files from the download with docs link and I have added it to my project. I've alo downloaded less.js and added it to my project. If I include the following in the head of a page:

<link rel="stylesheet/less" href="@routes.Assets.at("less/bootstrap.less")">
    <script src="@routes.Assets.at("less/less-1.3.0.min.js")"></script>

The bootstrap seems to work, minus the responsive part (i.e. the navbar won't collapse if the browser window becomes too narrow). I can fix this by manually adding bootstrap-responsive.css

<link rel="stylesheet" href="@routes.Assets.at("stylesheets/bootstrap-responsive.css")" />

The problem is that if I want to modify the color theme of my page, I need to edit the color values in bootstrap-responsive.css, which is a pain. It looks like some of the .less files were meant to generate bootstrap-responsive.css (for example responsive-navabar.less), but they aren't working.

Any advice on how I can get the bootstrap-responsive.css file from the .less files?

Answer 1

You need to explicitly include also this file:

responsive.less

Assuming you are using recent version (2.0.x) of Twitter Bootstrap.

As mentioned on their website (http://twitter.github.com/bootstrap/scaffolding.html#responsive):

Bootstrap doesn't automatically include these media queries, but understanding and adding them is very easy and requires minimal setup. You have a few options for including the responsive features of Bootstrap:

1. Use the compiled responsive version, bootstrap-responsive.css
2. Add @import "responsive.less" and recompile Bootstrap
3. Modify and recompile responsive.less as a separate file

Why not just include it? Truth be told, not everything needs to be responsive. Instead of encouraging developers to remove this feature, we figure it best to enable it.