Source

Dimensionnement

Créez facilement un élément aussi large ou aussi haut avec nos utilitaires de largeur et de hauteur.

Relatif au parent

Les utilitaires de largeur et de hauteur sont générés à partir de la $sizescarte Sass dans _variables.scss. Inclut la prise en charge de 25%, 50%, 75%, 100%et autopar défaut. Modifiez ces valeurs car vous devez générer différents utilitaires ici.

Largeur 25%
Largeur 50%
Largeur 75%
Largeur 100%
Largeur automatique 
<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>
Hauteur 25%
Hauteur 50%
Hauteur 75%
Hauteur 100%
Hauteur automatique 
<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>

Vous pouvez également utiliser max-width: 100%;et max-height: 100%;utilitaires selon vos besoins.

Placeholder Max-width 100% 
<img src="..." class="mw-100" alt="...">
Max-hauteur 100% 
<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>

Relatif à la fenêtre

Vous pouvez également utiliser des utilitaires pour définir la largeur et la hauteur par rapport à la fenêtre.

<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>