ڈھیر
شارٹ ہینڈ مددگار جو اجزاء کی ترتیب کو پہلے سے کہیں زیادہ تیز اور آسان بنانے کے لیے ہماری فلیکس باکس یوٹیلیٹیز کے اوپر تیار کرتے ہیں۔
اسٹیکس بوٹسٹریپ میں تیزی اور آسانی سے لے آؤٹ بنانے کے لیے متعدد فلیکس باکس پراپرٹیز کو لاگو کرنے کے لیے ایک شارٹ کٹ پیش کرتے ہیں۔ تصور اور نفاذ کا تمام کریڈٹ اوپن سورس پائلون پروجیکٹ کو جاتا ہے ۔
عمودی
.vstack
عمودی لے آؤٹ بنانے کے لیے استعمال کریں ۔ اسٹیک شدہ آئٹمز بطور ڈیفالٹ پوری چوڑائی کے ہوتے ہیں۔ .gap-*
اشیاء کے درمیان جگہ شامل کرنے کے لیے افادیت کا استعمال کریں ۔
<div class="vstack gap-3">
<div class="bg-light border">First item</div>
<div class="bg-light border">Second item</div>
<div class="bg-light border">Third item</div>
</div>
افقی
.hstack
افقی ترتیب کے لیے استعمال کریں ۔ اسٹیک شدہ آئٹمز بطور ڈیفالٹ عمودی طور پر مرکز میں ہوتے ہیں اور صرف اپنی ضروری چوڑائی لیتے ہیں۔ .gap-*
اشیاء کے درمیان جگہ شامل کرنے کے لیے افادیت کا استعمال کریں ۔
<div class="hstack gap-3">
<div class="bg-light border">First item</div>
<div class="bg-light border">Second item</div>
<div class="bg-light border">Third item</div>
</div>
افقی مارجن کی افادیت کا استعمال کرتے ہوئے .ms-auto
جیسے اسپیسرز:
<div class="hstack gap-3">
<div class="bg-light border">First item</div>
<div class="bg-light border ms-auto">Second item</div>
<div class="bg-light border">Third item</div>
</div>
اور عمودی قوانین کے ساتھ :
<div class="hstack gap-3">
<div class="bg-light border">First item</div>
<div class="bg-light border ms-auto">Second item</div>
<div class="vr"></div>
<div class="bg-light border">Third item</div>
</div>
مثالیں
.vstack
بٹنوں اور دیگر عناصر کو اسٹیک کرنے کے لیے استعمال کریں :
<div class="vstack gap-2 col-md-5 mx-auto">
<button type="button" class="btn btn-secondary">Save changes</button>
<button type="button" class="btn btn-outline-secondary">Cancel</button>
</div>
اس کے ساتھ ایک ان لائن فارم بنائیں .hstack
:
<div class="hstack gap-3">
<input class="form-control me-auto" type="text" placeholder="Add your item here..." aria-label="Add your item here...">
<button type="button" class="btn btn-secondary">Submit</button>
<div class="vr"></div>
<button type="button" class="btn btn-outline-danger">Reset</button>
</div>
سس
.hstack {
display: flex;
flex-direction: row;
align-items: center;
align-self: stretch;
}
.vstack {
display: flex;
flex: 1 1 auto;
flex-direction: column;
align-self: stretch;
}