How do I define grid layouts in bootstrap with less? [duplicate] - css

Question

This question already has answers here:
Using mixins in bootstrap 3 to avoid unsemantic markup for layout structure
(3 answers)
Closed 8 years ago.
If we use bootstrap without a preprocessor we add classes into our opening tags like this:
<div id="El" class="col-md-1"></div>
I'm used to using bourbon neat with sass, in which case I can import mixins within the rules for my elements in sass. In which case I can do things like this:
#myEl
#import span-column(6)
Looking at the less documentation for bootstrap here: http://bootstrapdocs.com/v3.1.1/docs/css/#less it appears that there are no mixins available for bootstraps grid system. They've got convenience mixins for vendor prefixes, transitions, gradients and other things, but nothing for their own grid system.
So I've got a couple of questions:
How do I use less to define my grid using bootstrap?
And, if I want to do actually do this, am I working against the tool itself? I'm thinking that if using the less version of bootstrap this way isn't documented, then maybe there's good reason for it. Perhaps the less version of bootstrap just isn't supposed to be used this way and I should be using another set of tools instead?

Answer 1

You could do this, but you have to write just less. A good introduction to less is at their website: www.lesscss.org.
In your case you need:
#import 'bootstrap/bootstrap.less';
#import 'bootstrap/theme.less';
#El {
.col-md-1;
}
Then you compile this file with lessc. After that, your #El-element will behave like a .col-md-1.
Intentionally, Bootstrap is meant to use with their css class and using their less-files is not the first way of bootstrap. But if you know bootstrap and less well, you shouldn't have problems. If you start fresh with bootstrap, I recommend that you use just their css.