twitter bootstrap version 3.0 rc1 NameError: .make-column is undefined

Question

I am using twitter bootstrap v 3.0 RC1 and I installed node and npm to compile less to css when I save the less file.

I include the bootstrap.css file into my html head, when I save the bootstrap.less, it compiles it into css like you would expect.

I created another .less file, (theme.less) within the same bootstrap/less directory where bootstrap.less resides with all the imports, thinking it would include those styles too, but it keeps giving me the following error when I try to compile the theme.less file:

NameError: .make-column is undefined in /path/to/assets/bootstrap/less/theme.less

/* ------- Theme styling ------- */
.content-body {
    .make-column(10);
}

I assume it is undefined since theme.less does not have a clue the .make-column mixin is, I am new to this so I am trying to figure out how to do this correctly, thanks

score 1 · Answer 1 · edited May 23 '17 at 11:51

Your code works (on linux)

create theme.less as above
add @import "theme.less"; at the end of bootstrap.less
compile by running grunt dist in your bootstrap folder or lessc bootstrap.less in your less folder

The result, the last lines of bootstrap.css contain:

/* ------- Theme styling ------- */

.content-body {
  position: relative;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
}

@media (min-width: 768px) {
  .content-body {
    float: left;
    width: 83.33333333333334%;
  }

See also: Twitter's Bootstrap 3.x semantic mobile grid

twitter bootstrap version 3.0 rc1 NameError: .make-column is undefined

1 Answers1