diff options
| author | Mark Otto <[email protected]> | 2017-04-08 15:14:52 -0700 |
|---|---|---|
| committer | Mark Otto <[email protected]> | 2017-04-08 15:15:14 -0700 |
| commit | feb35b94a61c4d6016be8d1773a79a6bbe57d856 (patch) | |
| tree | a308ea5712b8271fa6c1ba96c5ab97696bc1cff4 | |
| parent | fba27befef3c63f523a681230358cc996bc037aa (diff) | |
| download | bootstrap-feb35b94a61c4d6016be8d1773a79a6bbe57d856.tar.xz bootstrap-feb35b94a61c4d6016be8d1773a79a6bbe57d856.zip | |
Revert "Drop width from sizing utils given .col- classes can do the same thing (follow up to #22376)"
This reverts commit 2f21403a933336f7cb01c86bf3c650490bc658a6.
| -rw-r--r-- | docs/utilities/sizing.md | 13 | ||||
| -rw-r--r-- | scss/_variables.scss | 2 | ||||
| -rw-r--r-- | scss/utilities/_sizing.scss | 2 |
3 files changed, 12 insertions, 5 deletions
diff --git a/docs/utilities/sizing.md b/docs/utilities/sizing.md index 782186c97..eabb4653a 100644 --- a/docs/utilities/sizing.md +++ b/docs/utilities/sizing.md @@ -4,9 +4,16 @@ title: Sizing group: utilities --- -Easily make an element as tall (relative to its parent) with our height utilities. Includes support for `25%`, `50%`, `75%`, and `100%` by default. Mix and match with our existing grid classes for controlling `width`. +Easily make an element as wide or as tall (relative to its parent) with our width and height utilities. Includes support for `25%`, `50%`, `75%`, and `100%` by default. -Height utilities are generated from the `$sizes` Sass map in `_variables.scss`. Modify those values as you need to generate different utilities here. +Width and height utilities are generated from the `$sizes` Sass map in `_variables.scss`. Modify those values as you need to generate different utilities here. + +{% example html %} +<div class="w-25 p-3" style="background-color: #eee;">Width 25%</div> +<div class="w-50 p-3" style="background-color: #eee;">Width 50%</div> +<div class="w-75 p-3" style="background-color: #eee;">Width 75%</div> +<div class="w-100 p-3" style="background-color: #eee;">Width 100%</div> +{% endexample %} {% example html %} <div style="height: 100px; background-color: rgba(255,0,0,0.1);"> @@ -17,7 +24,7 @@ Height utilities are generated from the `$sizes` Sass map in `_variables.scss`. </div> {% endexample %} -Use `max-width: 100%;` and `max-height: 100%;` utilities as needed. +You can also use `max-width: 100%;` and `max-height: 100%;` utilities as needed. {% example html %} <img class="mw-100" data-src="holder.js/1000px100?text=Max-width%20%3D%20100%25" alt="Max-width 100%"> diff --git a/scss/_variables.scss b/scss/_variables.scss index beb8b9c13..f517797fa 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -148,7 +148,7 @@ $spacers: ( 5: ($spacer * 3) ) !default; -// This variable affects the `.h-*` classes. +// This variable affects the `.h-*` and `.w-*` classes. $sizes: ( 25: 25%, 50: 50%, diff --git a/scss/utilities/_sizing.scss b/scss/utilities/_sizing.scss index 9b4acf226..a7dc3e49b 100644 --- a/scss/utilities/_sizing.scss +++ b/scss/utilities/_sizing.scss @@ -1,6 +1,6 @@ // Width and height -@each $prop, $abbrev in (height: h) { +@each $prop, $abbrev in (width: w, height: h) { @each $size, $length in $sizes { .#{$abbrev}-#{$size} { #{$prop}: $length !important; } } |