mirror of
https://github.com/twbs/bootstrap.git
synced 2025-01-09 02:46:15 +01:00
b46f05a948
This commit includes all the needed workarounds and most changes from the main branch for everything to work, like: * removing empty lines in raw HTML that break output * read .browserslistrc, CSS variables from disk instead of duplicating it * using Hugo mounts * using Hugo for the docs CSS/JS * move ToC Sass code to a separate file while adapting it for Hugo Thus, this patch makes our npm scripts faster since lint runs on one step and there's no separate docs assets processing.
2.1 KiB
2.1 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 $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
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%
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>