in English

سائز کرنا

ہماری چوڑائی اور اونچائی کی افادیت کے ساتھ آسانی سے ایک عنصر کو اتنا ہی چوڑا یا لمبا بنائیں۔

والدین کا رشتہ دار

چوڑائی اور اونچائی کی افادیتیں $sizesSass کے نقشے سے تیار کی گئی ہیں _variables.scss۔ 25%, 50%, 75%, 100%, اور autoبطور ڈیفالٹ کے لیے سپورٹ شامل ہے ۔ ان اقدار میں ترمیم کریں جیسا کہ آپ کو یہاں مختلف یوٹیلیٹیز پیدا کرنے کی ضرورت ہے۔

چوڑائی 25%
چوڑائی 50%
چوڑائی 75%
چوڑائی 100%
چوڑائی آٹو
<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>
اونچائی 25%
اونچائی 50%
اونچائی 75%
اونچائی 100%
اونچائی آٹو
<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>

آپ ضرورت کے مطابق استعمال max-width: 100%;اور max-height: 100%;افادیت بھی لے سکتے ہیں۔

Placeholder Max-width 100%
<img src="..." class="mw-100" alt="...">
زیادہ سے زیادہ اونچائی 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>

ویو پورٹ سے متعلق

آپ ویو پورٹ کی نسبت چوڑائی اور اونچائی سیٹ کرنے کے لیے بھی یوٹیلیٹیز استعمال کر سکتے ہیں۔

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