Using Less Mixins with twitter-bootstrap-rails

Question

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!

Answer 1

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