From c26dede97f626b52b7bf8962ed55d1dbda86abe8 Mon Sep 17 00:00:00 2001 From: Hilmar R Date: Sun, 28 Feb 2021 21:06:16 +0100 Subject: get dev --- .../site/content/docs/4.6/utilities/sizing.md | 52 ++++++++++++++++++++++ 1 file changed, 52 insertions(+) create mode 100644 vendor/twbs/bootstrap/site/content/docs/4.6/utilities/sizing.md (limited to 'vendor/twbs/bootstrap/site/content/docs/4.6/utilities/sizing.md') diff --git a/vendor/twbs/bootstrap/site/content/docs/4.6/utilities/sizing.md b/vendor/twbs/bootstrap/site/content/docs/4.6/utilities/sizing.md new file mode 100644 index 000000000..c5e8654a1 --- /dev/null +++ b/vendor/twbs/bootstrap/site/content/docs/4.6/utilities/sizing.md @@ -0,0 +1,52 @@ +--- +layout: docs +title: Sizing +description: Easily make an element as wide or as tall with our width and height utilities. +group: utilities +toc: true +--- + +## Relative to the parent + +Width and height utilities are generated from the `$sizes` Sass map in `_variables.scss`. Includes support for `25%`, `50%`, `75%`, `100%`, and `auto` by default. Modify those values as you need to generate different utilities here. + +{{< example >}} +
Width 25%
+
Width 50%
+
Width 75%
+
Width 100%
+
Width auto
+{{< /example >}} + +{{< example >}} +
+
Height 25%
+
Height 50%
+
Height 75%
+
Height 100%
+
Height auto
+
+{{< /example >}} + +You can also use `max-width: 100%;` and `max-height: 100%;` utilities as needed. + +{{< example >}} +{{< placeholder width="100%" height="100" class="mw-100" text="Max-width 100%" >}} +{{< /example >}} + +{{< example >}} +
+
Max-height 100%
+
+{{< /example >}} + +## Relative to the viewport + +You can also use utilities to set the width and height relative to the viewport. + +```html +
Min-width 100vw
+
Min-height 100vh
+
Width 100vw
+
Height 100vh
+``` -- cgit v1.2.3