Add .w-100 as width: 100% utility class

[mdo]

Fixes #19221.

Any other width utilities to seriously consider?

[houndci-bot]

!important should not be used

[sergej2705]

I would take a more generic identifier like .full-width instead, no?

[cvrebert]

The current name parallels the naming of the other utilities and sets a pattern that additional width utilities can follow (e.g. .w-50).
Also, .w-100 indicates exactly what the class does (width: 100%, and nothing else) (albeit utilizing an abbreviation), whereas .full-width could potentially be interpreted differently (e.g. max-width: 100%, display: block) by readers lacking context.

[cvrebert]

This will also address #19202.

[Mevrael]

@mdo @cvrebert

What about adding breakpoints to w-100 utlity class? In many cases element must be 100% until X breakpoint. For example buttons, dropdowns custom form inputs and other elements on mobile should be 100% while on larger screens elements must keep auto width they have by default.

Something like
.w-100
.w-100-sm-up
.w-100-sm-down
.w-100-md-up
.w-100-md-down
...

Please note that I am against adding xs to 1st element same as in discussion about .hidden because:

1. it's not obvious;
2. if developer will made custom breakpoints or add a breakpoint before xs then utilty class wont cover all breakpoints, i.e. if currently in whole codebase you use .hidden-xs-up and after some time added new breakpoint xxs, your hidden-xs-up wont work on new breakpoint, it wont work as expected "hidden always"

[cvrebert]

Added documentation in a follow-up commit.

[cvrebert]

Merging since adding .w-100 will resolve multiple issues.
We can always add further width utilities (or bikeshed the naming more) later.
@Mevrael Feel free to open a new issue for your breakpoints suggestion.
/fyi @mdo

[mdo]

Thanks @cvrebert!