1

I'm making my first attempt to use bootstrap mixins with the twitter-bootstrap-rails gem with bootstrap. Within the file app/assets/stylesheets/custom.less I have the following

.form-left{
  .col-md-4;
  .col-md-offset-2;
}

So my aim is for the class form-left to behave as though it's styled with the bootstrap classes col-md-4 and .col-md-offset-2.

The problem is that when I fire up the page, I am confronted with the following error:

.col-md-offset-2 is undefined (in app/assets/stylesheets/custom.less)

What might I be leaving out? It's quite possible that it's somehting simple as I'm rather new at this.

Many thanks for any guidance!

neanderslob
  • 2,633
  • 6
  • 40
  • 82

1 Answers1

3

Make sure the proper mixins and variables are loaded first:

@import "twitter/bootstrap/mixins.less";
@import "twitter/bootstrap/variables.less";

For using columns as mixins, the syntax is different. In your specific case, try it like this:

.make-md-column(4) .make-md-column-offset(2)

Take a look at here for the full documentation: http://getbootstrap.com/css/#grid-less

Sander Garretsen
  • 1,683
  • 10
  • 19
  • Hi Sander, thanks for the reply! I gave it a shot with `@import "twitter/bootstrap/grid.less";` and was told `.make-md-column(4) is undefined` so I imported according to the [twittter-bootstrap-rails docs:](https://github.com/seyhunak/twitter-bootstrap-rails#using-stylesheets-with-less) `@import "twitter/bootstrap/variables.less";` and `@import "twitter/bootstrap/mixins.less";` and it worked like a charm. I've included the modifications in an edit to your answer. Would never have guessed the syntax difference that you pointed out though. Many thanks! – neanderslob Jan 07 '15 at 10:10
  • You are right. `twitter/bootstrap/mixins.less` is loading the `grid.less`. Changed my answer to import `twitter/bootstrap/mixins.less` – Sander Garretsen Jan 07 '15 at 10:15
  • I gave it a test and found that I also need `@import "twitter/bootstrap/variables.less";` in order to get past the `undefined` error. – neanderslob Jan 07 '15 at 10:18
  • 1
    Ok, didn't know that. Updated answer once again. Thanks! – Sander Garretsen Jan 07 '15 at 10:25