diff options
| author | Mark Otto <markdotto@gmail.com> | 2017-04-09 00:01:38 +0300 |
|---|---|---|
| committer | Mark Otto <markd.otto@gmail.com> | 2017-04-09 00:23:47 +0300 |
| commit | 2f21403a933336f7cb01c86bf3c650490bc658a6 (patch) | |
| tree | 7f4209c4499dcb096b8c5302e1b1c1916c7f2d71 /docs | |
| parent | 11c2c07e260b99d5d685ce4edb97d7b031da4b3a (diff) | |
Drop width from sizing utils given .col- classes can do the same thing (follow up to #22376)
Diffstat (limited to 'docs')
| -rw-r--r-- | docs/utilities/sizing.md | 13 |
1 files changed, 3 insertions, 10 deletions
diff --git a/docs/utilities/sizing.md b/docs/utilities/sizing.md index eabb4653ac..782186c977 100644 --- a/docs/utilities/sizing.md +++ b/docs/utilities/sizing.md @@ -4,16 +4,9 @@ title: Sizing group: utilities --- -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. +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`. -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 %} +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 style="height: 100px; background-color: rgba(255,0,0,0.1);"> @@ -24,7 +17,7 @@ Width and height utilities are generated from the `$sizes` Sass map in `_variabl </div> {% endexample %} -You can also use `max-width: 100%;` and `max-height: 100%;` utilities as needed. +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%"> |