Bootstrap Flex پلے گراؤنڈ
Bootstrap 5.3 کے flex لے آؤٹ بصری طور پر بنائیں اور بالکل درست یوٹیلٹی کلاسز کاپی کریں — d-flex، justify-content، align-items، order، grow اور مزید۔
—
سب کچھ آپ کے براؤزر میں چلتا ہے — کچھ بھی اپ لوڈ نہیں ہوتا۔
آپ کی مقرر کردہ کلاسز اس بریک پوائنٹ اور اس سے اوپر لاگو ہوتی ہیں۔ ریسپانسیو لے آؤٹ بنانے کے لیے بریک پوائنٹس تبدیل کریں۔
Bootstrap Flex پلے گراؤنڈ کے بارے میں
Bootstrap Flex Playground آپ کو خام CSS کے بجائے حقیقی Bootstrap 5.3 یوٹیلٹی کلاسز کے ساتھ فلیکس باکس لے آؤٹس بنانے دیتا ہے۔ کنٹینر کنفیگر کریں — سمت، ریپنگ، justify-content، align-items، gap — سیگمنٹڈ کنٹرولز کے ساتھ، کسی بھی آئٹم پر کلک کر کے اس کا اپنا align-self، order، grow اور shrink یوٹیلٹیز سیٹ کریں، اور لائیو پیش منظر کو فوراً دوبارہ ترتیب پاتے دیکھیں۔
بریک پوائنٹ سوئچر ہی اسے کھلونے سے بڑھ کر بناتا ہے: sm، md، lg، xl یا xxl چنیں اور اس نقطے سے آگے آپ کے سیٹ کردہ کلاسز کو رسپانسیو انفکس مل جاتا ہے — justify-content-md-between، flex-lg-row — بالکل ویسے ہی جیسے Bootstrap کا mobile-first سسٹم انہیں اس بریک پوائنٹ سے اوپر لاگو کرتا ہے۔ حقیقت پسندانہ کمپوننٹ کی نقالی کے لیے 12 تک آئٹمز شامل کریں۔
جب لے آؤٹ درست لگے، تو تیار کردہ HTML یا صرف کنٹینر کلاسز کاپی کریں اور انہیں سیدھا اپنے پروجیکٹ میں پیسٹ کریں۔ سب کچھ آپ کے براؤزر میں چلتا ہے اور کچھ بھی اپ لوڈ نہیں ہوتا۔
Bootstrap Flex پلے گراؤنڈ استعمال کرنے کا طریقہ
- سیگمنٹڈ کنٹرولز کے ساتھ کنٹینر یوٹیلٹیز سیٹ کریں — سمت، wrap، justify-content، align-items اور gap۔
- اپنے حقیقی کمپوننٹ سے میچ کرنے کے لیے آئٹمز شامل یا ہٹائیں (2 سے 12)۔
- کسی آئٹم پر کلک کر کے اسے اپنا align-self، order یا فلیکس سائزنگ یوٹیلٹیز دیں۔
- sm، md، lg، xl یا xxl سے اوپر لاگو ہونے والے رسپانسیو ویری ئنٹس شامل کرنے کے لیے بریک پوائنٹس تبدیل کریں۔
- لائیو پیش منظر چیک کریں، پھر تیار کردہ HTML یا کنٹینر کلاسز کاپی کریں۔