Bootstrap: Feature request: Variable sizing utilities based on user's viewport

[alsoknownasdrew]

I didn't find a way to set different sizes on one element with sizing utilities classes. It would be nice to be able to use classes like

<div class="w-25 w-md-50 w-lg-100"></div>

And resize the element according to the breakpoint.

I would be happy to work on it if it gets approved.

[Mitcheljager]

This isn't a solution, but if you are using scss you can use the following in the meantime:

@each $breakpoint, $breakpoint-value in $container-max-widths {
  @include media-breakpoint-down($breakpoint) {
    @each $size, $value in $sizes {
      .w-#{$breakpoint}-#{$size} {
        width: $value !important;
      }
    }
  }
}

This will create the following:

@media (max-width: 575px) {
  .w-xs-25 {
    width: 25% !important;
  }

  .w-xs-50 {
    width: 50% !important;
  }

  .w-xs-75 {
    width: 75% !important;
  }

  .w-xs-100 {
    width: 100% !important;
  }
}
@media (max-width: 767px) {
  .w-sm-25 {
    width: 25% !important;
  }

  .w-sm-50 {
    width: 50% !important;
  }

  .w-sm-75 {
    width: 75% !important;
  }

  .w-sm-100 {
    width: 100% !important;
  }
}
@media (max-width: 991px) {
  .w-md-25 {
    width: 25% !important;
  }

  .w-md-50 {
    width: 50% !important;
  }

  .w-md-75 {
    width: 75% !important;
  }

  .w-md-100 {
    width: 100% !important;
  }
}
@media (max-width: 1199px) {
  .w-lg-25 {
    width: 25% !important;
  }

  .w-lg-50 {
    width: 50% !important;
  }

  .w-lg-75 {
    width: 75% !important;
  }

  .w-lg-100 {
    width: 100% !important;
  }
}

[mdo]

No plans to add this at this time.

[leecollings]

No plans to add this at this time.

Why not? It's been over a year since this was closed, so I would assume progress has been made and this should now be looking to be added as it's quite an important piece of functionality to give to this?

It makes perfect sense, following the same lines as all of the other responsive classes that have been added such as text alignment

Why can't this be added? Surely there's no reason not to?

[leecollings]

This isn't a solution, but if you are using scss you can use the following in the meantime:

@each $breakpoint, $breakpoint-value in $container-max-widths {
  @include media-breakpoint-down($breakpoint) {
    @each $size, $value in $sizes {
      .w-#{$breakpoint}-#{$size} {
        width: $value !important;
      }
    }
  }
}

This will create the following:

@media (max-width: 575px) {
  .w-xs-25 {
    width: 25% !important;
  }

  .w-xs-50 {
    width: 50% !important;
  }

  .w-xs-75 {
    width: 75% !important;
  }

  .w-xs-100 {
    width: 100% !important;
  }
}
@media (max-width: 767px) {
  .w-sm-25 {
    width: 25% !important;
  }

  .w-sm-50 {
    width: 50% !important;
  }

  .w-sm-75 {
    width: 75% !important;
  }

  .w-sm-100 {
    width: 100% !important;
  }
}
@media (max-width: 991px) {
  .w-md-25 {
    width: 25% !important;
  }

  .w-md-50 {
    width: 50% !important;
  }

  .w-md-75 {
    width: 75% !important;
  }

  .w-md-100 {
    width: 100% !important;
  }
}
@media (max-width: 1199px) {
  .w-lg-25 {
    width: 25% !important;
  }

  .w-lg-50 {
    width: 50% !important;
  }

  .w-lg-75 {
    width: 75% !important;
  }

  .w-lg-100 {
    width: 100% !important;
  }
}

There's a problem with these. Usually, if I use anything current in the form -md-, this will apply for all sizes MD and above, meaning a min-width media query would be used.

It seems your outputted CSS is doing the other way around, and only applying up to this size.

Are you sure that's correct? Based on the example of text alignment, and testing it in a browser, I believe the output should be this:

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

[Hassan-Moin]

@leecollings is correct, the query should be

@each $breakpoint, $breakpoint-value in $container-max-widths {
  @include media-breakpoint-up($breakpoint) {
    @each $size, $value in $sizes {
      .w-#{$breakpoint}-#{$size} {
        width: $value !important;  
    } 
   }
  }
}

Replaced @include media-breakpoint-down with @include media-breakpoint-up as this complies to
@media (min-width: 544px) {} etc instead of max-width.

[leecollings]

@mdo Can this be reconsidered please?