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