I\'m working on a project where we are leaving the Bootstrap less files untouched. We also do not want to use Bootstrap classes in the HTML, since we may not use it in the futur
As said, the grid can't really be extended so an alternate solution must be found. Even though the accepted answer is right I'd like to share another approach that can be considered.
Generate your grid or simply copy all the relevant classes (.col-xs-1
, .col-xs-2
ecc.) from the css and put them in a new Less file named something like grid.less
(note the less extension).
Import this file in your main .less
file like so:
@import (reference) "grid.less";
Now you can &:extend(.col-sm-6);
Importing using (reference)
will generate a css without any trace of .col-xx-x
classes and will only write the values that you actually use.