Kosala bonene ya biloko

Facilement sala élément moko ya large to ya molayi (par rapport na parent na yango) na ba utilitaires na biso ya largeur na hauteur.

Ba utilitaires ya largeur na hauteur esalemi na $sizescarte ya Sass na _variables.scss. Esangisi lisungi mpo na 25%, 50%, 75%, 100%, mpe autona ndenge ya libela. Modifier ba valeurs wana ndenge esengeli o produire ba utilitaires différentes awa.

Bolai ya 25% .

Bolai ya 50% .

Bolai ya 75% .

Bolai ya 100%

Largura auto

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

Bolai 25% .

Bolai 50% .

Bolai 75% .

Bolai 100% .

Taille auto

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

Okoki mpe kosalela max-width: 100%;mpe max-height: 100%;ba utilités soki esengeli.

Max-largeur = 100% [1000%x100] Ezali na ntina mingi.

<img class="mw-100" src=".../1000px100?text=Max-width%20%3D%20100%25" alt="Max-width 100%">

Max-hauteur 100% Ezali na .

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