diff --git a/docs/utilities/sizing-and-positioning.md b/docs/utilities/sizing-and-positioning.md index 670b6f188b..9e3f35ca1b 100644 --- a/docs/utilities/sizing-and-positioning.md +++ b/docs/utilities/sizing-and-positioning.md @@ -21,15 +21,21 @@ The `.pos-f-t` class can be used to easily position elements at the top of the v ## Width and height -Easily make an element as wide or as tall as its parent using the `.w-100` and `.h-100` utility classes. +Easily make an element as wide or as tall (relative to its parent) our width and height utilities. Includes support for `25%`, `50%`, `75%`, and `100%`. {% example html %} -Width 100% +
Width 25%
+
Width 50%
+
Width 75%
+
Width 100%
{% endexample %} {% example html %}
-
Full height
+
Height 25%
+
Height 50%
+
Height 75%
+
Height 100%
{% endexample %} diff --git a/scss/utilities/_spacing.scss b/scss/utilities/_spacing.scss index a8d8e0afb5..9e1802c47c 100644 --- a/scss/utilities/_spacing.scss +++ b/scss/utilities/_spacing.scss @@ -1,6 +1,13 @@ // Width and height +.w-25 { width: 25% !important; } +.w-50 { width: 50% !important; } +.w-75 { width: 75% !important; } .w-100 { width: 100% !important; } + +.h-25 { height: 25% !important; } +.h-50 { height: 50% !important; } +.h-75 { height: 75% !important; } .h-100 { height: 100% !important; } .mw-100 { max-width: 100% !important; }