Bootstrap: Change .col-{size}-{n} to .col.{size}-{n}

[ghost]

As we use things like .table.table-striped and .btn.btn-primary I suggest we use .col.{size}-{n} and so on. This allows us to simplify from:

.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .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, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12 {
  position: relative;
  min-height: 1px;
  padding-right: .9375rem;
  padding-left: .9375rem;
}

To:

.col {
  position: relative;
  min-height: 1px;
  padding-right: .9375rem;
  padding-left: .9375rem;
}

This would also allow us to use .{size}-{n} (and the related offsets, pushes, and pulls) for things other than columns (e.g. form groups where we might not want the min-height, position, and/or padding of columns).

[kkirsche]

I'd be curious what @mdo and the @twbs team thinks about this. Personally I'm not opposed to this though

[cvrebert]

While I think .col.col-{size}-{n} could make sense, I think we'd be opposed to .col.{size}-{n} since we don't use the "chained classes" approach to writing CSS. See http://markdotto.com/2012/02/16/scope-css-classes-with-prefixes/

[YaroslavShapoval]

I think "chained classes" is a bad way. So, we should discuss .col.col-{size}-{n} variant.

1. If you need to change style for all columns, the best way to do this is changing standard bootstrap mixin for this and compile your own version (sic - just use any build system for recompile and happiness will come). Do not forget that if you use bower, all changes in the vendor directory will not be saved.

bootstrap/scss/mixins/_grid-framework.scss

scss %grid-column { position: relative; // Prevent columns from collapsing when empty min-height: 1px; // Inner gutter via padding padding-left: ($gutter / 2); padding-right: ($gutter / 2); color: red; }

Perhaps this silent class should be moved somewhere so that could be easily rewritten.

1. If you need to change style only for columns on one single page, you still can simply add col class and change styles for this.

Your html

html <div class="example-page"> <div class="row"> <div class="col col-sm-6">Hey</div> <div class="col col-sm-6">Ho</div> </div> </div>

Your scss

scss .example-page { .col { color: red; } }

[jimmyamash]

I agree with @YaroslavShapoval. We should really write it as .col.col-{size}-{n}. Much simpler and consistent with other class formatting. I guess it makes it easier to style columns externally if needed by separating .col as a separate class.

[jimmyamash]

I also have a feeling that using .{size}-{n} as a class instead of .col-{size}-{n} might cause some problems down the line. Numbered classes can get a little wonky.

[cvrebert]

CC: @mdo

[bassjobsen]

Possible also reconsider using partial attribute selectors in stead of base classes: https://github.com/twbs/bootstrap/issues/10332#issuecomment-53823476 also see http://benfrain.com/css-performance-revisited-selectors-bloat-expensive-styles/

[cvrebert]

@bassjobsen Doesn't seem workable due to lack of robustness:

• [class^=col] Doesn't match <div class="foo col-xs-5">
• [class*=col] Incorrectly matches <div class="broccoli">

[lcdss]

@cvrebert what u think about this way?

.row .col.col-{size}-{n} { // }

http://materializecss.com/grid.html

[cvrebert]

@lcdss .col.col-{size}-{n} is an option.

[bassjobsen]

@cvrebert i suggest [class^="col-"], [class*=" col-"] {} and also .col.col-{size}-{n} makes sense for me.

[mdo]

Coming in #19099.

[cvrebert]

Reopening since it doesn't seem like the final version of #19099 actually ended up addressing this.

[cvrebert]

CC: @mdo

[mdo]

Ah, yeah, sorry about that. I ended up not going the base class route for the grid. Not in #19099 and not in the newly updated #20349 (which restores some grid behavior from pre-#19099).

Edit: Building on that, it felt unnecessary. The grid works pretty great in v3 and I think I tried to get a little to creative with reinventing it in v4. Adding the flexbox variation is enough of a differentiation, but then I tried to break up classes, combine mixins, etc. Didn't lead to anything better, just something different with different nuances.