Can Bootstrap 3 Grid Be Extended?

Question

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

Answer 1

.col-sm-6 is dynamic generate on compilation time, so can not extended.

.search {
  .make-sm-column(6);
}

generates:

.search {
  position: relative;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px;
}
@media (min-width: 768px) {
  .search {
    float: left;
    width: 50%;
  }
}

Which is a little overhead, but small in relation to the other source.

In theory you can can compile twice:

1. lessc bootstrap.less > bootstrap.css

2. lessc test.less > test.css, with test.less:

   @import (less) "bootstrap.css";
   .search {
     &:extend(.col-sm-6);
   }
   

doing a diff over bootstrap.css and test.css i found as expected among others:

>   .col-sm-6,
>   .search {
1010c1082,1093
<   .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
---

recompiling seems futher:

• put .col-md-* etc. on a new line
• change for example 0.75 to .75
• change (enabled = false) into (enabled=false)

which all make no sense on the first sight

Answer 2

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.

1. 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).

2. Import this file in your main .less file like so:

   @import (reference) "grid.less";

3. 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.

Answer 3

You can extend columns in SASS

.cols
  @extend .row
  .col1, .col2
    @extend .col-xs-6