* Bump version to 5.3.0-alpha1 * Dist * Add docs versions updates * Update note in homepage hero Co-authored-by: Mark Otto <markdotto@gmail.com>
2.2 KiB
layout | title | description | group | toc |
---|---|---|---|---|
docs | Sizing | Easily make an element as wide or as tall with our width and height utilities. | utilities | true |
Relative to the parent
Width and height utilities are generated from the utility API in _utilities.scss
. Includes support for 25%
, 50%
, 75%
, 100%
, and auto
by default. Modify those values as you need to generate different utilities here.
{{< example class="bd-example-flex" >}}
{{< 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 >}}
Relative to the viewport
You can also use utilities to set the width and height relative to the viewport.
<div class="min-vw-100">Min-width 100vw</div>
<div class="min-vh-100">Min-height 100vh</div>
<div class="vw-100">Width 100vw</div>
<div class="vh-100">Height 100vh</div>
Sass
Utilities API
Sizing utilities are declared in our utilities API in scss/_utilities.scss
. [Learn how to use the utilities API.]({{< docsref "/utilities/api#using-the-api" >}})
{{< scss-docs name="utils-sizing" file="scss/_utilities.scss" >}}