Any way to get breakpoint-specific width classes?

Question

Bootstrap 4 includes the width classes:

w-25
w-50
w-75
w-100

I want to specify widths only for certain breakpoints and above; e.g., "w-md-25", etc.

Is it possible to add such classes in the SCSS files, or otherwise get this functionality?

Answer 1

Got it figured out with Blazemonger's help. I added this to my custom.scss file, recompiled, and it worked beautifully:

@each $breakpoint in map-keys($grid-breakpoints) {
  @each $size, $length in $sizes {
    @include media-breakpoint-up($breakpoint) {
      .w-#{$breakpoint}-#{$size} {width: $length !important;}
    }
  }
}

Answer 2

In the 'ugly as sin' solution category, if you don't want to play with SCSS you can do things like:

<!-- Show at 100% width on xs devices. Hide (d-sm-none) on sm and above -->
<element class="w-100 d-sm-none">

<!-- Hide on xs devices. Show normally on sm and above -->
<element class="d-none d-sm-flex">

Depending upon the complexity of what you are trying to achieve, this can be a workaround. See https://getbootstrap.com/docs/4.3/utilities/display/#hiding-elements for more detail on hiding selectively.