Bootstrap: Expand the Sizing Utility to allow for responsive breakpoints like "w-xl-50" (css, feature, v4)

[matthiku]

Currently, the _Sizing_ utility (https://getbootstrap.com/docs/4.1/utilities/sizing/) only allows for the sizing of the height or width of an element without regard to the viewport size.

So for instance the "w-50" class makes a lot of sense on a large device in order to limit the width of, for instance, a help text, but not so much on a small device.

This could be resolved by adding breakpoints to the utility in the same way as it is done for the _Spacing_ utility:

• w-lg-25 (_width: 25%_ only on large+ devices)
• w-md-50 (_width: 50%_ only on large+ devices)
• w-sm-75 (...)
• w-100 (would be like _w-xs-100_)

This enhancement would not change existing usage, but would allow more flexibility for various device sizes.

Summary: Add support for the following classes:

w-sm-100, w-sm-75, w-sm-50 and w-sm-25
w-md-100, w-md-75, w-md-50 and w-md-25
w-lg-100, w-lg-75, w-lg-50 and w-lg-25
w-xl-100, w-xl-75, w-xl-50 and w-xl-25
h-sm-100, h-sm-75, h-sm-50 and h-sm-25
h-md-100, h-md-75, h-md-50 and h-md-25
h-lg-100, h-lg-75, h-lg-50 and h-lg-25
h-xl-100, h-xl-75, h-xl-50 and h-xl-25

[matthiku]

Why can't I see and add labels to this issue?

[dospuntocero]

this pull request fixes this issue https://github.com/twbs/bootstrap/pull/21975

[mdo]

We'll pass on this for now, thanks though.

[mdo]

Why can't I see and add labels to this issue?

Only project members of the repository's organization have access to set these.

[sunyang713]

I was also looking for this when I first came across the sizing utilities and was disappointed that it didn't exist. Is there a good reason why there are breakpoints for things like spacing, but not this? Otherwise, the sizing utilities are pretty useless by themselves.

[madmax]

+1 I have lots of this class in bootstrap3. For example on Media object I have 60px image on xs viewport and 80px on larger screens.

Now with bootstrap 4 i can just add

$sizes: (
  25: 25%,
  50: 50%,
  75: 75%,
  100: 100%,
  60px: 60px,
  80px: 80px,
  100px: 100px
);

And get all this classes.

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

[inidaname]

Please this should be a feature it makes my sizing looks dump with viewport
Thanks

[jpkontreras]

@mdo Could you elaborate on why we dont need this feature?

[mariendev]

I am also in need for this behavior, any ETA on this?

[sameronline]

Thanks @madmax I just used your code to generate per breakpoints classes into my custom built bootstrap.

Any reason why we don't need this feature? it makes a lot of sense to have it.

[matthiku]

Probably because there is not enough interest :(

[lgespee]

I would like to see this behavior added.

[mdo]

As far as feature requests go, I didn't say you didn't need it—only that we weren't going to do it right now. Adding this means adding 20 classes total. Each new utility balloons our CSS just a little bit more, so I'm always very cautious against adding more of them.

[LonerD]

I support the idea.
And already did in my custom css classes with the same names as in first post.
I use it with forms customization. Forms like "Enter your name... Enter your E-mail..." look good with w-100 on mobile devices, but too wide on PC.

[luisalves73]

I would like this to be a part of bootstrap

[0oMarko0]

it Would be quite useful to have that feature

[davidrhoderick]

Yes I just ran across a need for this.

[gilmorem560]

+1 support

[Fankadore]

I would appreciate this being added please

[emb03]

+1

[RomanADavis]

Just another +1 for interest in having this functionality in bootstrap.

[owenfranssen]

I run into this limitation repeatedly, and just have again, so another +1

[xaviermawet]

I'm interested in this new feature 👍 +1

[olso]

Pls

[AxXxel001]

Very interested. It's just a really basic, missing feature... I assumed it was already there. +1

[luisgagocasas]

I would like this to be a part of bootstrap please.

[rip057]

this should definitely be a part of bootstrap, specifically for when you are sizing something say fifty percent view port width wide, say with a card so you can have a card-card side by side, but on a smaller screen you want it to be full view port width. i realize that you could add some grid sizing and get the same thing in theory, but this concept just makes since and falls in line with the bootstrap theme of breakpoints and view sizes being added in the classes.

[wilbertcaba]

Well I had to serve myself on this one with plain css. I also added some more like width/height-20,40,60 and 80 to account for multiples of 4. If you have a better solution than this, please share:

.w-100 {width: 100% !important;}
.w-80 {width: 80% !important;}
.w-75 {width: 75% !important;}
.w-60 {width: 60% !important;}
.w-50 {width: 50% !important;}
.w-40 {width: 40% !important;}
.w-25 {width: 25% !important;}
.w-20 {width: 20% !important;}

@media (min-width:576px) {
    .w-sm-100 {width: 100% !important;}
    .w-sm-80 {width: 80% !important;}
    .w-sm-75 {width: 75% !important;}
    .w-sm-60 {width: 60% !important;}
    .w-sm-50 {width: 50% !important;}
    .w-sm-40 {width: 40% !important;}
    .w-sm-25 {width: 25% !important;}
    .w-sm-20 {width: 20% !important;}
}

@media (min-width:768px) {
    .w-md-100 {width: 100% !important;}
    .w-md-80 {width: 80% !important;}
    .w-md-75 {width: 75% !important;}
    .w-md-60 {width: 60% !important;}
    .w-md-50 {width: 50% !important;}
    .w-md-40 {width: 40% !important;}
    .w-md-25 {width: 25% !important;}
    .w-md-20 {width: 20% !important;}
}

@media (min-width:992px) {
    .w-lg-100 {width: 100% !important;}
    .w-lg-80 {width: 80% !important;}
    .w-lg-75 {width: 75% !important;}
    .w-lg-60 {width: 60% !important;}
    .w-lg-50 {width: 50% !important;}
    .w-lg-40 {width: 40% !important;}
    .w-lg-25 {width: 25% !important;}
    .w-lg-20 {width: 20% !important;}
}

@media (min-width:1200px) {
    .w-xl-100 {width: 100% !important;}
    .w-xl-80 {width: 80% !important;}
    .w-xl-75 {width: 75% !important;}
    .w-xl-60 {width: 60% !important;}
    .w-xl-50 {width: 50% !important;}
    .w-xl-40 {width: 40% !important;}
    .w-xl-25 {width: 25% !important;}
    .w-xl-20 {width: 20% !important;}
}

[rip057]

I fixed my situation by wrapping in some col divs

Instead of an element with a class="etcetc... w-100 w-md-50"

I wrapped in a

ELEMENT>

Worked fine, but I still think there should be that option, it makes
sense...

On Jul 25, 2018 9:08 AM, "wilbertcaba" [e-mail] wrote:

Well I had to serve myself on this one with plain css. I also added some
more like width/height-20,40,60 and 80 to account for multiples of 4. If
you have a better solution than this, please share:

`.w-100 {width: 100% !important;}
.w-80 {width: 80% !important;}
.w-75 {width: 75% !important;}
.w-60 {width: 60% !important;}
.w-50 {width: 50% !important;}
.w-40 {width: 40% !important;}
.w-25 {width: 25% !important;}
.w-20 {width: 20% !important;}

@media https://github.com/media (min-width:576px) {
.w-sm-100 {width: 100% !important;}
.w-sm-80 {width: 80% !important;}
.w-sm-75 {width: 75% !important;}
.w-sm-60 {width: 60% !important;}
.w-sm-50 {width: 50% !important;}
.w-sm-40 {width: 40% !important;}
.w-sm-25 {width: 25% !important;}
.w-sm-20 {width: 20% !important;}
}

@media https://github.com/media (min-width:768px) {
.w-md-100 {width: 100% !important;}
.w-md-80 {width: 80% !important;}
.w-md-75 {width: 75% !important;}
.w-md-60 {width: 60% !important;}
.w-md-50 {width: 50% !important;}
.w-md-40 {width: 40% !important;}
.w-md-25 {width: 25% !important;}
.w-md-20 {width: 20% !important;}
}

@media https://github.com/media (min-width:992px) {
.w-lg-100 {width: 100% !important;}
.w-lg-80 {width: 80% !important;}
.w-lg-75 {width: 75% !important;}
.w-lg-60 {width: 60% !important;}
.w-lg-50 {width: 50% !important;}
.w-lg-40 {width: 40% !important;}
.w-lg-25 {width: 25% !important;}
.w-lg-20 {width: 20% !important;}
}

@media https://github.com/media (min-width:1200px) {
.w-xl-100 {width: 100% !important;}
.w-xl-80 {width: 80% !important;}
.w-xl-75 {width: 75% !important;}
.w-xl-60 {width: 60% !important;}
.w-xl-50 {width: 50% !important;}
.w-xl-40 {width: 40% !important;}
.w-xl-25 {width: 25% !important;}
.w-xl-20 {width: 20% !important;}
}`

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/twbs/bootstrap/issues/21943#issuecomment-407765892,
or mute
the thread
https://github.com/notifications/unsubscribe-auth/AJ0Vcny-7CS2Z2KaoClAxR4G1pEq_f6iks5uKHv4gaJpZM4L64U8
.

[dpatey]

@mdo This utility serves zero effective purpose in a responsive framework if its not responsive. If, as you say, bloat is your primary concern here, why would you bother including the utility at all when it's application is so limited?

[Joyrex]

I recently had a "shower thought" (yes, I know it's pretty sad thinking about Bootstrap in the shower) about how on forms, the inputs default to the width of their parent element - it would be great if the width utilities were responsive so say a form that uses two .col-md-6 for a two-column layout could specify that the form inputs inside only take up 50% of the parent's width at -lg or -xl breakpoints, but default to 100% on -md or smaller.

I echo @dpatey and others' sentiment that a utility should be responsive in a primarily responsive framework. I get the caution about bloating the CSS, but on the other side of the coin our code becomes bloated and needlessly complex by having to use multiple elements/utilities to achieve basic effects (e.g., using an inner .col- to provide the responsiveness).

[sintacs]

Please add this feature to the bootstrap core.

[yi]

please add this feature

[gvorster]

Please add this. I have just started using Bootstrap and this feature is one of the first thing I am missing.

[joshuar500]

Would love to see this feature as well.

[oweskeez]

+1 for this feature

[johnmarlow007]

I also needed it in quite a few cases and I had to find all kind of custom, but unwelcomed solutions. It would be so nice to have it in the default functionality, just like the paddings and margins.
That would add even more to BS greatness!

[lovrozitnik]

+1 for this feature

[rabbithops]

Also +1

[rtpHarry]

Unless I've misunderstood something then I don't know why it was declined. If I have a h-100 to align full screen centered and my content is taller than the screen on small mobiles then it behaves undesirably.

The logo is pushing off the top of the screen and the content off the bottom but I cannot scroll to see it.

css
body,html { height: 100%; }

html
<div class="container-fluid h-100"> <div class="row h-100"> <div class="col-12 p-0 h-100"> <div class="h-100 jumbotron text-center m-0 d-flex flex-column justify-content-center"> <p><img src="img/logo.svg" class="img-responsive logo" alt=""></p> <h1 class="h2">Coming Soon</h1> <p>some content</p> <p>some content</p> <p>some content</p> <p>some content</p> <p>some content</p> <p>some content</p> <p>some content</p> </div> </div> </div> </div>

[matthiku]

It wasn't declined for technical reasons. The benefits of this enhancement request are well known (I think).

The reason simply is that it would increase the size of the library and according to the maintainers, there's not enough demand to justify this increase.

[rtpHarry]

I see. I just started to upgrade my skills to BS4 with a "simple" holding page and thought I would align it in the middle. An hour and a half later I'm still reading things trying to figure out how to make it usable, so I guess I'm skewed over the importance of this right now

[rtpHarry]

Ah yes @matthiku it looks like mdo has already said as much, I missed it in amongst the list of +1's

mdo: As far as feature requests go, I didn't say you didn't need it—only that we weren't going to do it right now. Adding this means adding 20 classes total. Each new utility balloons our CSS just a little bit more, so I'm always very cautious against adding more of them.

[ringo2k]

found this topic, i also have the same problem, i would like to have this feature too.

[madmax]

Why wait its so easy to add

https://gist.github.com/madmax/3854e478a43ac959ac8a4f075b98366a

I use it in all projects :)

[billsantry]

Yes, please add this feature. It would be a logical upgrade to add screen sizes same as we do for as other properties.

[nswetha6]

ETA for this feature !!

[PerryD]

I would accept a little bloat to make the h-* and w-* classes a little more useful. Until then, thanks @madmax for providing a nice solution.

[thomasfw]

@mdo Why not remove the sizing utility in it's entirety if saving from "bloat" is the end goal? The utility class is almost entirely useless without these breakpoints.

[mel-d]

+1 for this

[fabiomaulo]

A feature as mw-md-25 is especially useful with card in card-deck when you use responsive cards (instead of fixed dimension of each card).

[DmMhs]

+1 for width-related selectors. I see no big need in a height-related ones, though.

[d-roduit]

+1

[stalinkay]

+1

[Nikki313]

+1

[elfrasco]

+1

[menthos984]

I recently had a "shower thought" (yes, I know it's pretty sad thinking about Bootstrap in the shower) about how on forms, the inputs default to the width of their parent element - it would be great if the width utilities were responsive so say a form that uses two .col-md-6 for a two-column layout could specify that the form inputs inside only take up 50% of the parent's width at -lg or -xl breakpoints, but default to 100% on -md or smaller.

I echo @dpatey and others' sentiment that a utility should be responsive in a primarily responsive framework. I get the caution about bloating the CSS, but on the other side of the coin our code becomes bloated and needlessly complex by having to use multiple elements/utilities to achieve basic effects (e.g., using an inner .col- to provide the responsiveness).

Thanks man! This solved my issue on the supposed breakpoints for w-spacing. I just added this to my code and it worked just fine.

But I agree that adding the w-breakpoint-spacing should be considered.

[info-lvsys]

+1. Came back here two years later. Disappointed it's still not there. Please add this, it's such a natural fit. Code bloat is worse than 20 classes in css. Website icons, text and photos weigh so much more than bootstrap, and most of us pull bootstrap from a CDN, cache it or pack it in web apps. @madmax solution is perfect and should be in there, we use it in production.

[kingmauro]

I came here looking for this feature too.

[cimminob]

I am also looking for this. Please add this feature.

[kyris9]

+1. very important/basic feature. I also thought this was included until today.

[icobg123]

+1 Essential feature. Could you please add it? thx

[dr-martin]

+1 for this feature. In my opinion: very important/basic. Make the helpers useful enough (again).

[ranggirahman]

+1 i need this feature

[anthony0030]

+1

[danehendren]

Adding my +1 for this.

[nachocoig]

+1 too! I think its very necessary

[matthiku]

@mdo This is by far the most liked and 3rd most commented-on feature request for v4 yet still closed. I think it's time that the maintainers of this project should consider opening this issue again!

[anthony0030]

Possibly even having the classes disabled by default, so bootstrap won't be bloated, and enabled by a variable like background gradient is.

[MarvDann]

+1

[mdo]

Always happy to revisit closed issues—I've missed the bulk of the follow-up here as I tend to ignore closed issues past a certain date. Regardless, decisions can always be changed :).

I'd like to better understand the use cases here though. Here's what I've seen mentioned thus far:

• Single-element sizing vs requiring a parent column.
• We can responsively set margin/padding, so why not dimensions?
• Handling custom card layouts is cumbersome right now.

_For what it's worth, I've bucketed all the "why not?", "please add", or "lol this is easy just do it" comments into implicit "yes, please add" votes. Most of those comments don't add any value here to the discussion of the usage of these proposed classes._

Please let me know if I've missed any other use cases.

My issue all along has been file size, yes—adding is easy, removing is difficult. But it's also been about the overlap with column classes when it comes to width utilities. Ideally these classes could largely be the same, but alas, I never found a viable way to do it without upending something else in the project.

We've tried to close the door on adding new features to v4 in favor of focusing on a smaller v5 update. However, we could sneak this in as a bug fix into v4.3.2 though and just say that we've missed these classes by accident. :grin: (Gotta follow semantic versioning!)

Thoughts from @twbs/team? This is a far more requested feature than I remembered and we have v4.3.2 already slated.

[MartijnCuppens]

We got to be careful not to add to many ways to set widths, but it looks like a lot of people are looking for a solution here. I guess if we provide an opt-in solution, this could be interesting for those who are in need for something like this.

I've thought about the generation of utility classes before and opened a discussion here how we should approach them in v5: https://github.com/twbs/bootstrap/issues/28367

In the v4-dev-mc-poc-property-utilities branch (don't use it yet, it's very unstable) I experimented a bit and for this case I have the following map which generates the width utilities:
https://github.com/twbs/bootstrap/blob/c13936e450e767a2a3859f874ae8ec278a5ff10a/scss/_property-utilities.scss#L126-L136

If you want to enable the responsive classes you could just set this in your custom configuration:

$width-utilities: (responsive: true);

[ShawLocke]

Always happy to revisit closed issues—I've missed the bulk of the follow-up here as I tend to ignore closed issues past a certain date. Regardless, decisions can always be changed :).

I'd like to better understand the use cases here though. Here's what I've seen mentioned thus far:

• Single-element sizing vs requiring a parent column.
• We can responsively set margin/padding, so why not dimensions?
• Handling custom card layouts is cumbersome right now.

_For what it's worth, I've bucketed all the "why not?", "please add", or "lol this is easy just do it" comments into implicit "yes, please add" votes. Most of those comments don't add any value here to the discussion of the usage of these proposed classes._

Please let me know if I've missed any other use cases.

My issue all along has been file size, yes—adding is easy, removing is difficult. But it's also been about the overlap with column classes when it comes to width utilities. Ideally these classes could largely be the same, but alas, I never found a viable way to do it without upending something else in the project.

We've tried to close the door on adding new features to v4 in favor of focusing on a smaller v5 update. However, we could sneak this in as a bug fix into v4.3.2 though and just say that we've missed these classes by accident. 😁 (Gotta follow semantic versioning!)

Thoughts from @twbs/team? This is a far more requested feature than I remembered and we have v4.3.2 already slated.

Yeah, I understand you. A lot of people are complaining that bootstrap is too heavy. So file size is priority.
I used to want expand width like w-lg-50 for desktop and w-100 for mobile, then I found I can use col-lg-6 to achieve that.

[info-lvsys]

@ShawLocke in our case, the issue we face is the elasticity of a column is not always desired. Ex: sidebars or column for labels on some forms. So this col-lg-6 approach causes elasticity that is weird for some columns that work best in fixed widths (think photoshop sidebars for example) that we need to dock to the left or right (for example) and want the main area to grow accordingly. Doing this without sizing classes is difficult.

[vibhor-mungee]

+1

[Skeiceee]

+1

[lasseron]

+1

[Vladqqw]

Less fix #28523
Or add in css
```
@media (min-width: 576px) {
.w-sm-25 {
width: 25% !important;
}
.w-sm-50 {
width: 50% !important;
}
.w-sm-75 {
width: 75% !important;
}
.w-sm-100 {
width: 100% !important;
}
.w-sm-auto {
width: auto !important;
}
.h-sm-25 {
height: 25% !important;
}
.h-sm-50 {
height: 50% !important;
}
.h-sm-75 {
height: 75% !important;
}
.h-sm-100 {
height: 100% !important;
}
.h-sm-auto {
height: auto !important;
}
}

@media (min-width: 768px) {
.w-md-25 {
width: 25% !important;
}
.w-md-50 {
width: 50% !important;
}
.w-md-75 {
width: 75% !important;
}
.w-md-100 {
width: 100% !important;
}
.w-md-auto {
width: auto !important;
}
.h-md-25 {
height: 25% !important;
}
.h-md-50 {
height: 50% !important;
}
.h-md-75 {
height: 75% !important;
}
.h-md-100 {
height: 100% !important;
}
.h-md-auto {
height: auto !important;
}
}

@media (min-width: 992px) {
.w-lg-25 {
width: 25% !important;
}
.w-lg-50 {
width: 50% !important;
}
.w-lg-75 {
width: 75% !important;
}
.w-lg-100 {
width: 100% !important;
}
.w-lg-auto {
width: auto !important;
}
.h-lg-25 {
height: 25% !important;
}
.h-lg-50 {
height: 50% !important;
}
.h-lg-75 {
height: 75% !important;
}
.h-lg-100 {
height: 100% !important;
}
.h-lg-auto {
height: auto !important;
}
}

@media (min-width: 1200px) {
.w-xl-25 {
width: 25% !important;
}
.w-xl-50 {
width: 50% !important;
}
.w-xl-75 {
width: 75% !important;
}
.w-xl-100 {
width: 100% !important;
}
.w-xl-auto {
width: auto !important;
}
.h-xl-25 {
height: 25% !important;
}
.h-xl-50 {
height: 50% !important;
}
.h-xl-75 {
height: 75% !important;
}
.h-xl-100 {
height: 100% !important;
}
.h-xl-auto {
height: auto !important;
}
}

[PyroGenesis]

+1

Thanks for your reconsideration about this feature. I'm already using replacement classes for this, and adding it to Bootstrap will ensure I don't have to declare it for every project.

[Omzee]

+1

For now, we can use col-lg-6, col-sm-12 I suppose

[otinanaipali]

+1 We need it!

[kikeonline]

+1

I need this for buttons, for now im using cols but would like to reserve that to real columns.

[pchaganti]

👍

[Dinour]

+1

[constructit]

Agree that this would be perfect for opt-in as part of Options eg.

$enable-sizing-breakpoints: false!default;

• Avoids extra overhead for those that don't need it.
• Saves people having to create their own version.
• Follows the existing pattern for _spacing.scss.

[NeliHarbuzava]

+1

[austriker27]

I would use this so often if Bootstrap had it... Just another reason why I use Tailwind when I have a choice.

[andreypopov]

+1 , please add

[cotwitch]

I support the idea.
And already did in my custom css classes with the same names as in first post.
I use it with forms customization. Forms like "Enter your name... Enter your E-mail..." look good with w-100 on mobile devices, but too wide on PC.

I also would like to use it while styling form/inputs.

[SaphiLC]

I would use this so often if Bootstrap had it... Just another reason why I use Tailwind when I have a choice.

why would you use bootstrap at all if you know about tailwind? o_O is infinitely times better

[DimitriPSN]

I support the idea.
And already did in my custom css classes with the same names as in first post.
I use it with forms customization. Forms like "Enter your name... Enter your E-mail..." look good with w-100 on mobile devices, but too wide on PC.

I also would like to use it while styling form/inputs.

I did this solution to be able to style my forms according to the screens.
w-sm-100 to be able to set my button to 100% on mobile and leave by default on larger screens

@import "../../node_modules/bootstrap/scss/mixins/_breakpoints.scss";

$sizes: (
  25: 25%,
  50: 50%,
  75: 75%,
  100: 100%,
);

@each $breakpoint in map-keys($grid-breakpoints) {
  @include media-breakpoint-down($breakpoint) {
    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);

    @each $prop, $abbrev in (width: w, height: h) {
      @each $size, $length in $sizes {
        .#{$abbrev}#{$infix}-#{$size} { #{$prop}: $length !important; }
      }
    }

  }
}

Otherwise, just change media-breakpoint-down / media-breakpoint-up / media-breakpoint-only

[yansen-chandra]

+1 I needed this

[AmirMehrabi]

Come on @mdo, you're killing us here!

[TakanashiOuken]

Kind of surprise bootstrap didn't have this while so many cool features

[marcost5m]

+1 on this!

[gburton]

+1

[niftylettuce]

@mdo can you please re-open?

[hiepnsx]

+1

[webcourse-ng]

+1 Got here looking for responsive width classes to allow nav link URLs to be declared only once for both, portable and standard viewports.

The portable menu is to be w25x4. The standard a flexbox with various widths depending on nav menu label. So far I haven't found a way to achieve this without having to define URLs for both separately, which might be a maintenance issue some day.

[portus84]

+1

[Aditya-ds-1806]

+1

[tulus-meti]

+1

[brktbelete]

:+1:

[oisoftware]

+1

[Dakkers]

I've had this in my codebase for a little while now, not sure if I copied it from someone else but it's useful:

/**
 * Creates a "breakpoint" based class, for example:
 *    $create-breakpoint-class('btn', 'purple')
 *      --> .btn-purple, .btn-sm-purple, .btn-md-purple, ...
 *    Where the class' content is applicable to that screen size.
 */
@mixin create-breakpoint-class ($class-name-prefix, $class-name-suffix) {
  @each $breakpoint in map-keys($grid-breakpoints) {
    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);

    .#{$class-name-prefix}#{$infix}-#{$class-name-suffix} {
      @include media-breakpoint-up ($breakpoint) {
        @content;
      }
    }
  }
}

Usage example:

@include create-breakpoint-class('w', '100') {
  width: 100% !important; 
}

[info-lvsys]

@Dakkers that is pretty cool. Better than the manual ones I have.

[edsoncarlosdvp]

Hello! I tried to use the breakpoint in the same project, but it didn't work, it worked before. I tried on a button.

w-100 w-md-auto

[lucianobosco]

This should be a MUST for BS4

[ReeZh]

Please make this feature available.
I'd would like to make my search box 100 % width while on mobile view, and width auto and inline block on tablet or desktop.

[iosiflivadaru]

3 years and nothing happened... Sad...

[anthony0030]

@mdo, you passed on this on Mar 20, 2017. close to three years ago, there is so much interest. Please Please add it, It would be much appreciated by so many people including my self.

[gersonmsj]

@media (min-width: 768px) {
.w-md-100 {
width: 100% !important;
}
}

[alanzhaonys]

Please add this feature.

[cotiga]

I love BS4 which has greatly improved the way I work.
But the class w-25, 50, 75 is nonsense if we can not adapt it according to the breakpoint.
Please add this functionality, despite some additional lines of code!

[plagasul]

I came looking for this feature when wanting to stretch 100% a form button on sm and xs. On first look I agree with cotiga that having this class and not being able to modify its effects responsively does not make much sense, but I may be wrong.

[borisBelloc]

I would like this to be a part of bootstrap... in XL screen my w-25 is perfect but it's too small on SM...

[eduarddrenth]

This is a must have I would say, why is this issue closed, I cannot find any arguments for the closing.

[matthiku]

@eduarddrenth back in January 2018, @mdo said:
"_As far as feature requests go, I didn't say you didn't need it—only that we weren't going to do it right now. Adding this means adding 20 classes total. Each new utility balloons our CSS just a little bit more, so I'm always very cautious against adding more of them._"

[eduarddrenth]

Thanks, so impact is the reason, fair enough. As an alternative I use the grid system with some adaptations in padding and the like.

[gburton]

As an example, I use this for placing a 75% box in the middle of the "login" screen.
At MD and above, that box reduces to 25% wide.

<div class="mx-auto w-75 w-md-25"> <div class="card text-center shadow mt-5">

It's a simple use case. No doubt it can be done in other ways, but so so simple this way...

I understand the reasoning for it not dropping into the core, but it does seem a shame to have something useful that does not make full use of its potential.

[jameson5555]

+1

[f3tusz]

+1

[joseph-d]

@mdo Tailwind CSS supports this with selectors like lg:w-32 - I understand the point you made in 2018 that this simple addition would balloon the CSS with 20 more selectors but then CSS purists would argue that frameworks like Bootstrap and Tailwind are one big balloon anyway. We've come this far, it seems like 20 extra selectors is a small price to pay for consistency with Float, Spacing, Text and all of the other Utilities that already support breakpoints.

Please reconsider adding this!

[FareedKhan-dev]

I have created a simple Media queries css sheet for applying different width sizes at different screen resoultion based on Bootstrap. So anyone can test and see if w-sm-50 and w-xl-75 both are working on same class or not.

The only disadvantage is that if you want to specify the property w-md-50, it will work only on md not on xl or lg.

So in order to make it work for devices greater than md.

You have to do like this: w-xl-50 w-lg-50 w-md-50.

here is the link of stylesheet:
<link rel="stylesheet" href="https://drive.google.com/uc?id=1jLrfISsLUcRiwgNl0koSfsS6lylj0E7h">

Live example
here is the link of jsfiddle: https://jsfiddle.net/bvo86qp4/2/

[sebmellen]

Why is this still not added? This is my most missed feature in Bootstrap.

[MihajloNesic]

+1

[anthony0030]

This can be easily activated in V5 simply by adding this to your variables file:

$utilities: (
  "width": (
    property: width,
    responsive: true,
    class: w,
    values: (
      25: 25%,
      50: 50%,
      75: 75%,
      100: 100%,
      auto: auto
    )
  ),
  "height": (
    property: height,
    responsive: true,
    class: h,
    values: (
      25: 25%,
      50: 50%,
      75: 75%,
      100: 100%,
      auto: auto
    )
  ),
);

What would be great is a setting boolean setting to activate the responsive setting without needing to overite the utility.
The developers at bootstrap have done a great job by adding the API to simply build the classes you need.

[eduarddrenth]

Nice...

[suraj-sella]

Very much needed feature please add it soon.

[RoLoDeXx]

I hope the production version of BS5 ship these.

[whoman]

very good needed feature

[alec87]

add this to your css:

/* Small devices (landscape phones, 576px and up)*/
@media (min-width: 576px) {
.w-sm-100 {
width:100%!important;
}
.w-sm-75 {
width:75%!important;
}
.w-sm-50 {
width:50%!important;
}
.w-sm-25 {
width:25%!important;
}
.h-sm-100 {
height:100%!important;
}
.h-sm-75 {
height:75%!important;
}
.h-sm-50 {
height:50%!important;
}
.h-sm-25 {
height:25%!important;
}
}

/* Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) {
.w-md-100 {
width:100%!important;
}
.w-md-75 {
width:75%!important;
}
.w-md-50 {
width:50%!important;
}
.w-md-25 {
width:25%!important;
}
.h-md-100 {
height:100%!important;
}
.h-md-75 {
height:75%!important;
}
.h-md-50 {
height:50%!important;
}
.h-md-25 {
height:25%!important;
}
}

/* Large devices (desktops, 992px and up)*/
@media (min-width: 992px) {
.w-lg-100 {
width:100%!important;
}
.w-lg-75 {
width:75%!important;
}
.w-lg-50 {
width:50%!important;
}
.w-lg-25 {
width:25%!important;
}
.h-lg-100 {
height:100%!important;
}
.h-lg-75 {
height:75%!important;
}
.h-lg-50 {
height:50%!important;
}
.h-lg-25 {
height:25%!important;
}
}

/* Extra large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px) {
.w-xl-100 {
width:100%!important;
}
.w-xl-75 {
width:75%!important;
}
.w-xl-50 {
width:50%!important;
}
.w-xl-25 {
width:25%!important;
}
.h-xl-100 {
height:100%!important;
}
.h-xl-75 {
height:75%!important;
}
.h-xl-50 {
height:50%!important;
}
.h-xl-25 {
height:25%!important;
}
}

[mdo]

If we included this in v4.6.0, and had no plans to support it in v5, would people be opposed? In v5, our column classes are grid agnostic, meaning they can be used for sizing anything, so these utilities would be superfluous.

In a v4.6.0 world, we could do .w-md-50 etc, and in v5, we'd have .col-6. Is that a manageable transition for folks?

[f3tusz]

This is the code to expand the sizing utility

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