Bootstrap 5.2 / Utilities

Afmetingen

Maak een element eenvoudig zo breed of zo hoog als je wilt met onze width- en height-utilities.

Ten opzichte van het bovenliggende element

Width- en height-utilities worden gegenereerd vanuit de utility-API in _utilities.scss. Standaard is er ondersteuning voor 25%, 50%, 75%, 100% en auto. Pas die waarden naar behoefte aan om hier andere utilities te genereren.

HTML

<div class="w-25 p-3" style="background-color: #eee;">Breedte 25%</div>
<div class="w-50 p-3" style="background-color: #eee;">Breedte 50%</div>
<div class="w-75 p-3" style="background-color: #eee;">Breedte 75%</div>
<div class="w-100 p-3" style="background-color: #eee;">Breedte 100%</div>
<div class="w-auto p-3" style="background-color: #eee;">Breedte auto</div>

HTML

<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)">Hoogte 25%</div>
  <div class="h-50 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Hoogte 50%</div>
  <div class="h-75 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Hoogte 75%</div>
  <div class="h-100 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Hoogte 100%</div>
  <div class="h-auto d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Hoogte auto</div>
</div>

Je kunt naar behoefte ook de utilities max-width: 100%; en max-height: 100%; gebruiken.

HTML

<img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%20100%20100%22%20preserveAspectRatio%3D%22xMidYMid%20slice%22%20role%3D%22img%22%20aria-label%3D%22Max-width%20100%25%22%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22%23868e96%22%3E%3C%2Frect%3E%3Ctext%20x%3D%2250%25%22%20y%3D%2250%25%22%20fill%3D%22%23fff%22%20dy%3D%22.3em%22%20text-anchor%3D%22middle%22%20font-family%3D%22sans-serif%22%20font-size%3D%2212%22%3EMax-width%20100%25%3C%2Ftext%3E%3C%2Fsvg%3E" width="100%" height="100" class="mw-100" alt="Max-width 100%">

HTML

<div style="height: 100px; background-color: rgba(255,0,0,.1);">
  <div class="mh-100" style="width: 100px; height: 200px; background-color: rgba(0,0,255,.1);">Max-height 100%</div>
</div>

Ten opzichte van de viewport

Je kunt ook utilities gebruiken om de breedte en hoogte ten opzichte van de viewport in te stellen.

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>

Sass

Utilities-API

Sizing-utilities worden gedeclareerd in onze utilities-API in scss/_utilities.scss. Leer hoe je de utilities-API gebruikt.

Standaardwaarden: zie scss/_utilities.scss in de Bootstrap-broncode.