Sayz fɔ di sayz
I izi fɔ mek wan ɛlimɛnt as waid ɔ as lɔng wit wi wid ɛn ayt yutiliti dɛn.
Fambul to di mama ɔ papa
Width ɛn height yutiliti dɛn de jenarayz frɔm di $sizesSass map insay _variables.scss. Inklud sɔpɔt fɔ 25%, 50%, 75%, 100%, ɛn autobay difɔlt. Modify dɛn valyu dɛn de as yu nid fɔ jenarayz difrɛn yutiliti dɛn ya.
Width na 25%
Width na 50%
Width na 75%
Width na 100%
Width otomatik
<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>
Ayt na 25%
Ayt na 50%
Ayt na 75%
Ayt na 100%
Ayt ɔto
<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>Yu kin yuz max-width: 100%;ɛn max-height: 100%;yutiliti dɛn bak as nid de.
<img src="..." class="mw-100" alt="...">
Maks-heit na 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>Rilaytiv to di say we dɛn de si di pikchɔ
Yu kin yuz yutiliti dɛn bak fɔ sɛt di wit ɛn ayt we yu kɔmpia am to di say we yu de si.
<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>