col-xs-n required in v4 to apply col- class behavior at small viewport size

[bpierson]

Because all col-xx-n classes except xs are defined in media queries, no col- css is applied in small and extra-small viewports in the following scenario:

<div class="container-fluid">
    <div class="row">
        <div class="col-md-4">No CSS at sm and xs</div>
        <div class="col-md-4">No CSS at sm and xs</div>
        <div class="col-md-4">No CSS at sm and xs</div>
    </div>
</div>

Note the lack of 15px padding in the screenshot, indicating that no col- css is applied:

Basically, there is no fallback CSS when no XS-level col is applied. It can be fixed by always including col-xs-12, but that seems like a hack.

[cvrebert]

@bpierson Am I correct that you are setting $enable-flex: true ?

[SharkyKZ]

Duplicate of #19803.

[cvrebert]

I suspect this is a duplicate of #17603.

[SharkyKZ]

In any case, this happens with and without flex. Padding is being added inside media queries for each specific column class so it only applies to specified widths. Adds a lot of duplicate CSS code too.

[cvrebert]

Adds a lot of duplicate CSS code too.

We're less concerned about that these days. Turns out gzip makes the "duplicate" (mixin-style) technique about the same speed (perhaps even faster!) in practice: https://tech.bellycard.com/blog/sass-mixins-vs-extends-the-data/

[bpierson]

@cvrebert to answer your original question - I'm not sure. I'm basically the guy that must eventually migrate a bunch of sites from v3 to v4, so all I'm doing is downloading a zip of the dev version and extracting the non-minified files from the dist. So, whatever the default SASS compilation settings that creates bootstrap.css is what would be set.

I did some digging around on the linked issues and found that @mdo had at one point gone down the path of separate .col and .xs-, .sm- etc. I'm not sure why this was abandoned, but it sounds like it wasn't working out with the flex model. I think this is too bad because it seems like the right approach. I know there were a few people in those other threads that commented about "if it ain't broke, don't fix it", but after all there will apparently be a LOT of breaking changes migrating from v3 to v4 (maybe not as many as v2 to v3...). They really are different platforms that are not meant to co-exist. So certainly if such a major change were to be done, now would be the time to do it.

One thing that comes to mind with a .col definition is that it would likely have the padding and non-size-related css within it, making it far easier for people using vanilla css to override something like padding for an entire site.

[mdo]

Closing as dupe of #19803.