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

matthiku · 2017-02-08T14:24:53Z

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 · 2017-02-08T14:28:15Z

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

dospuntocero · 2017-02-12T18:08:32Z

this pull request fixes this issue #21975

mdo · 2017-03-19T22:27:09Z

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

mdo · 2017-03-19T22:27:41Z

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 · 2017-04-04T21:13:47Z

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 · 2017-04-11T13:22:59Z

+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 · 2017-12-19T14:01:39Z

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

jpkontreras · 2018-01-04T20:08:54Z

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

mariendev · 2018-01-09T12:21:29Z

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

sameronline · 2018-01-12T14:54:22Z

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 · 2018-01-12T14:58:42Z

Probably because there is not enough interest :(

lgespee · 2018-01-12T22:32:49Z

I would like to see this behavior added.

mdo · 2018-01-13T01:17:02Z

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 · 2018-04-12T13:04:39Z

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 · 2018-04-16T16:53:24Z

I would like this to be a part of bootstrap

0oMarko0 · 2018-04-19T18:57:37Z

it Would be quite useful to have that feature

davidrhoderick · 2018-04-25T14:13:07Z

Yes I just ran across a need for this.

gilmorem560 · 2018-04-25T15:47:28Z

+1 support

Fankadore · 2018-05-07T17:49:38Z

I would appreciate this being added please

emb03 · 2018-05-31T18:30:31Z

+1

RomanADavis · 2018-06-21T06:59:21Z

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

owenfranssen · 2018-06-25T16:30:07Z

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

xaviermawet · 2018-07-04T12:15:29Z

I'm interested in this new feature 👍 +1

olso · 2018-07-07T16:09:25Z

Pls

AxXxel001 · 2018-07-10T22:05:36Z

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

jameson5555 · 2020-05-18T18:48:34Z

+1

f3tusz · 2020-06-01T15:10:34Z

+1

joseph-d · 2020-06-06T12:16:46Z

@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 · 2020-06-07T12:52:21Z

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 · 2020-07-22T00:33:09Z

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

MihajloNesic · 2020-08-08T23:14:32Z

+1

anthony0030 · 2020-08-11T06:47:09Z

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 · 2020-08-12T09:14:57Z

Nice...

suraj-sella · 2020-08-29T19:27:41Z

Very much needed feature please add it soon.

RoLoDeXx · 2020-09-02T02:34:44Z

I hope the production version of BS5 ship these.

whoman · 2020-09-10T23:42:33Z

very good needed feature

alecschmitzz · 2020-09-18T11:12:59Z

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 · 2020-09-19T02:37:51Z

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 · 2020-09-30T20:26:56Z

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

anson-GH · 2021-03-09T02:19:49Z

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

@import "~bootstrap/scss/bootstrap-grid.scss";

powercoderr · 2021-05-01T09:01:39Z

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

it's work, thank you

javierav · 2021-09-17T11:16:01Z

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.

You can modify the map instead of overwrite:

$utilities: map-merge(
  $utilities,
  (
    "width": map-merge(
      map-get($utilities, "width"),
      (
        responsive: true
      )
    )
  )
);

See https://getbootstrap.com/docs/5.1/utilities/api/#enable-responsive

MmrMahfuj · 2021-11-11T05:55:11Z

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

it's work😍😍

MikeEntyce · 2022-05-18T10:21:17Z

Over 5 years later and it's still not added 👏

anthony0030 · 2022-05-18T10:23:56Z

@MikeEntyce, Any Ideas on how to get them to add it this decade (2020-2030)?

madmax · 2022-05-18T10:35:50Z

@anthony0030 very easy (using sass):

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

$utilities: (
  "width": (
    responsive: true,
    property: width,
    class: w,
    values: $sizes,
  ),
  "height": (
    responsive: true,
    property: height,
    class: h,
    values: $sizes
  ),
)

anthony0030 · 2022-05-18T10:40:24Z

@madmax, thanks for the fast reply!
I know that it can be added with SASS. I even posted on this thread on how to do it.
It would be good to be added in CSS so I don't need to recompile it for each project that needs it.
Or like a plugin that is hosted on an official CDN.

ozzy432836 · 2022-11-05T22:59:04Z

Its still not there in BS 5.2
Another use case is for the offcanvas.
I want it w-100 and then w-50-md and finally w-25-lg
This is a perfect example of a use case where it would benefit one of their own components.

But thankfully, there are some great devs that provide the missing CSS in this discussion above.

blackmonkey · 2023-04-01T11:57:48Z

I just realized that we can use the col-* classes to fix this issue, e.g.

w-lg-25 (width: 25% only on large+ devices): col-lg-3
w-md-50 (width: 50% only on large+ devices): col-md-6
w-sm-75 (...): col-sm-9
w-100 (would be like w-xs-100): col-12
width 25% except on large+ devices, and 16% on large+ devices: col-3 col-lg-2

salicius · 2023-07-14T09:34:55Z

5.3 still doesn't have it, absurd!

anthony0030 · 2023-07-14T09:49:45Z

Here is a function to deep-set values in SCSS maps. Credits to the original author.

/// Deep set function to set a value in nested maps
/// @author Kitty Giraudel
/// @access public
/// @param {Map} $map - Map
/// @param {List} $keys -  Key chain
/// @param {*} $value - Value to assign
/// @return {Map}

@function map-deep-set($map, $keys, $value) {
  $maps: ($map,);
  $result: null;

  // If the last key is a map already
  // Warn the user we will be overriding it with $value
  @if type-of(nth($keys, -1)) == "map" {
    @warn "The last key you specified is a map; it will be overridden with `#{$value}`.";
  }

  // If $keys is a single key
  // Just merge and return
  @if length($keys) == 1 {
    @return map-merge($map, ($keys: $value));
  }

  // Loop from the first to the second to last key from $keys
  // Store the associated map to this key in the $maps list
  // If the key doesn't exist, throw an error
  @for $i from 1 through length($keys) - 1 {
    $current-key: nth($keys, $i);
    $current-map: nth($maps, -1);
    $current-get: map-get($current-map, $current-key);
    @if $current-get == null {
      @error "Key `#{$key}` doesn't exist at current level in map.";
    }
    $maps: append($maps, $current-get);
  }

  // Loop from the last map to the first one
  // Merge it with the previous one
  @for $i from length($maps) through 1 {
    $current-map: nth($maps, $i);
    $current-key: nth($keys, $i);
    $current-val: if($i == length($maps), $value, $result);
    $result: map-merge($current-map, ($current-key: $current-val));
  }

  // Return result
  @return $result;
}

Here is how you enable the responsive classes.

$utilities: map-deep-set($utilities, "height" "responsive", true);
$utilities: map-deep-set($utilities, "max-height" "responsive", true);
$utilities: map-deep-set($utilities, "width" "responsive", true);
$utilities: map-deep-set($utilities, "max-width" "responsive", true);

This is the best solution I have come up with so far.

smileBeda · 2023-09-26T09:47:29Z

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.

This should be put on top of this thread as a solution, so users do not have to scroll through the rest of comments.
It is a very nice and solid solution and basically resolves the issue.

anthony0030 · 2023-09-26T10:33:59Z

@smileBeda, Thanks for the compliment! There are other comparable solutions in this thread.
In my projects, I have been using deep-set more.

It would be great if Bootstrap added a simple sass variable that we could activate for this feature.

bardiharborow added css v4 labels Feb 9, 2017

arechsteiner mentioned this issue Mar 8, 2017

Expand the spacing utility to allow for responsive breakpoints like "pl-lg-3" #22134

Closed

mdo closed this as completed Mar 19, 2017

mdo added the feature label Mar 19, 2017

evanwill mentioned this issue May 14, 2020

responsive width feature includes uidaholib/collectionbuilder-cdm-template#88

Closed

stsrki mentioned this issue Oct 1, 2023

Responsive Sizing utilities Megabit/Blazorise#5027

Closed

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

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

Comments

matthiku commented Feb 8, 2017 • edited Loading

Summary: Add support for the following classes:

matthiku commented Feb 8, 2017

dospuntocero commented Feb 12, 2017

mdo commented Mar 19, 2017

mdo commented Mar 19, 2017

sunyang713 commented Apr 4, 2017 • edited Loading

madmax commented Apr 11, 2017 • edited Loading

inidaname commented Dec 19, 2017

jpkontreras commented Jan 4, 2018

mariendev commented Jan 9, 2018

sameronline commented Jan 12, 2018 • edited Loading

matthiku commented Jan 12, 2018

lgespee commented Jan 12, 2018

mdo commented Jan 13, 2018

LonerD commented Apr 12, 2018

luisalves73 commented Apr 16, 2018

0oMarko0 commented Apr 19, 2018

davidrhoderick commented Apr 25, 2018

gilmorem560 commented Apr 25, 2018

Fankadore commented May 7, 2018

emb03 commented May 31, 2018

RomanADavis commented Jun 21, 2018

owenfranssen commented Jun 25, 2018

xaviermawet commented Jul 4, 2018

olso commented Jul 7, 2018

AxXxel001 commented Jul 10, 2018

jameson5555 commented May 18, 2020

f3tusz commented Jun 1, 2020

joseph-d commented Jun 6, 2020

FareedKhan-dev commented Jun 7, 2020

sebmellen commented Jul 22, 2020

MihajloNesic commented Aug 8, 2020

anthony0030 commented Aug 11, 2020

eduarddrenth commented Aug 12, 2020

suraj-sella commented Aug 29, 2020

RoLoDeXx commented Sep 2, 2020

whoman commented Sep 10, 2020

alecschmitzz commented Sep 18, 2020

mdo commented Sep 19, 2020

f3tusz commented Sep 30, 2020 • edited Loading

anson-GH commented Mar 9, 2021

powercoderr commented May 1, 2021

javierav commented Sep 17, 2021 • edited Loading

MmrMahfuj commented Nov 11, 2021

MikeEntyce commented May 18, 2022

anthony0030 commented May 18, 2022

madmax commented May 18, 2022

anthony0030 commented May 18, 2022

ozzy432836 commented Nov 5, 2022 • edited Loading

blackmonkey commented Apr 1, 2023 • edited Loading

salicius commented Jul 14, 2023

anthony0030 commented Jul 14, 2023

smileBeda commented Sep 26, 2023

anthony0030 commented Sep 26, 2023

matthiku commented Feb 8, 2017 •

edited

Loading

sunyang713 commented Apr 4, 2017 •

edited

Loading

madmax commented Apr 11, 2017 •

edited

Loading

sameronline commented Jan 12, 2018 •

edited

Loading

f3tusz commented Sep 30, 2020 •

edited

Loading

javierav commented Sep 17, 2021 •

edited

Loading

ozzy432836 commented Nov 5, 2022 •

edited

Loading

blackmonkey commented Apr 1, 2023 •

edited

Loading