Custom grid with Less for Bootstrap 2

0
votes

I'm working on a Joomla site that will have a container width of 940px (can be up to 1000px, but not wider). Joomla 3, regretfully, sticks to Bootstrap 2. The online customizer for BS 2.3.2 is long gone. What I used to do is tick everything except large screen, and work with that version. The default Bootstrap, minus the Large Screen settings.

Now I have to do the same thing in Less, and I haven't done that. Who can give me some tips?

Changing the responsive-1200px-min.less from @media (min-width: 1200px) to @media (min-width: 940px), then crunch the bootstrap.less into bootstrap.css and replace bootstrap.css in the CSS folder doesn't work.

I know I doing this completely wrong, hence my question.

1
twitter-bootstrapjoomlalesstwitter-bootstrap-2

1 Answers

0
votes
  1. Download the Bootstrap source files at https://github.com/twbs/bootstrap/archive/v2.3.2.zip
  2. Open the less/responsive.less file and remove or comment out the @import "responsive-1200px-min.less"; line
  3. recompile bootstrap-responsive.css, by running the following command: lessc -x less/responsive.less bootstrap-responsive.css
  4. replace your original bootstrap-responsive.css with the file you have compiled in step 3

No changes for your bootstrap.css file are required. Of course you can recompile that file too, with the following command: lessc -x less/bootstrap.less bootstrap.css