4

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?

Henry Henrinson
  • 5,203
  • 7
  • 44
  • 76
  • Important Note! The responsive.less should be placed near the end of your imports. Not in the grid system and page structure. I place it at the bottom of in components nav – Malte Schulze-Boeing Feb 15 '13 at 12:39

1 Answers1

10

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.

Community
  • 1
  • 1
Tadeck
  • 132,510
  • 28
  • 152
  • 198
  • @JeromyFrench: What is the relation between the question you have linked and this question? It is not obvious, looking solely at the question you have linked. – Tadeck Jun 17 '13 at 17:44
  • both questions deal generally with Bootstrap LESS and specifically with strategies for customizing Bootstrap CSS via the LESS source ("...if I want to modify the color theme of my page..."). I'll remove if you don't think it helpful (or perhaps I should have commented the question and not your answer). – Jeromy French Jun 17 '13 at 17:48