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 future. I'm experimenting with using the "extend" feature to group our class names with the BS version in the style sheet. This has worked well except with the grid columns. Since the column class names are built with the ".make-grid" mixin, I can't extend them. Any thoughts on how to not use BS classnames for the grid AND not bloat the CSS?

If you are unfamiliar with the extend option, you can view the documentation here: http://www.lesscss.org/#-extend

//Not ideal because it duplicates declarations.
.mytable {
  .table;
}

//Good because it groups the selectors instead of duplicating declarations.
.mytable {
  &:extend(.table all);
}

//This does not work, but I wish it did.
.search {
  &:extend(.col-sm-6); 
}

//This is not ideal because it duplicates declarations.
.search {
  .make-sm-column(6);
}

possible duplicate of [Twitter's Bootstrap 3.x semantic mobile grid](http://stackoverflow.com/questions/17307137/twitters-bootstrap-3-x-semantic-mobile-grid) — Bass Jobsen, Jan 24 '14 at 22:01

score 13 · Accepted Answer · edited Mar 18 '15 at 04:32

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

lessc bootstrap.less > bootstrap.css

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

Everything is on one line when I compress it. Excellent solution. I was also able to compile the grid.less on the side and then import it in, though I'm not sure if there is any benefit to it over what you have done. — Ann, Jan 27 '14 at 18:14

score 1 · Answer 2 · answered Sep 12 '14 at 04:15

1

You can extend columns in SASS

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

answered Sep 12 '14 at 04:15

firedev

20,898
20
64
94

Oh wow, thanks for downvoting. I use this all the time. Yes it can be extended and works fine. – firedev Mar 19 '15 at 10:55
1

i think the question is about Less and your answer about Sass – Bass Jobsen May 22 '15 at 07:21

score 1 · Answer 3 · edited Jun 20 '20 at 09:12

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.

Can Bootstrap 3 Grid Be Extended?

3 Answers3

Linked