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?

Should be easy enough to add to your own SCSS, using Bootstrap's `_sizing.scss` as a guide. — Blazemonger, Dec 11 '17 at 20:06
Thanks. I don't know much about Sass, but with your comment (and a bit of poking around) I was able to figure it out. — Matthew, Dec 11 '17 at 21:48
A related feature request, currently being ignored: https://github.com/twbs/bootstrap/issues/26528 — Duncan Jones, May 05 '19 at 06:16
Related: https://stackoverflow.com/a/66758895/633961 (work-around via `min-width` and `max-width`) — guettli, Mar 23 '21 at 07:31

score 16 · Answer 1 · answered Dec 11 '17 at 21:50

16

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;}
    }
  }
}

answered Dec 11 '17 at 21:50

Matthew

471
3
13

1

I had to add this for your code to work $sizes: ( 25: 25%, 50: 50%, 75: 75%, 100: 100%, ); But it worked, thanks! – Barrard Feb 09 '22 at 07:27

score 7 · Answer 2 · answered May 05 '19 at 06:25

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.

Any way to get breakpoint-specific width classes?

2 Answers2