mirror of
https://github.com/twbs/bootstrap.git
synced 2025-01-10 03:46:13 +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.
53 lines
2.1 KiB
Markdown
53 lines
2.1 KiB
Markdown
---
|
|
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 >}}
|
|
<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>
|
|
<div class="w-auto p-3" style="background-color: #eee;">Width auto</div>
|
|
{{< /example >}}
|
|
|
|
{{< example >}}
|
|
<div style="height: 100px; background-color: rgba(255,0,0,0.1);">
|
|
<div class="h-25 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 25%</div>
|
|
<div class="h-50 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 50%</div>
|
|
<div class="h-75 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 75%</div>
|
|
<div class="h-100 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 100%</div>
|
|
<div class="h-auto d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height auto</div>
|
|
</div>
|
|
{{< /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 >}}
|
|
<div style="height: 100px; background-color: rgba(255,0,0,0.1);">
|
|
<div class="mh-100" style="width: 100px; height: 200px; background-color: rgba(0,0,255,0.1);">Max-height 100%</div>
|
|
</div>
|
|
{{< /example >}}
|
|
|
|
## Relative to the viewport
|
|
|
|
You can also use utilities to set the width and height relative to the viewport.
|
|
|
|
```html
|
|
<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>
|
|
```
|