Bootstrap گرڈ پلے گراؤنڈ
Bootstrap 5.3 گرڈ کے ساتھ ریسپانسیو لے آؤٹ بصری طور پر بنائیں اور درست کلاسیں کاپی کریں — row، col، آفسیٹس، ترتیب، گٹرز اور الائنمنٹ۔
—
سب کچھ آپ کے براؤزر میں چلتا ہے — کچھ بھی اپ لوڈ نہیں ہوتا۔
آپ کی مقرر کردہ کلاسیں اس بریک پوائنٹ سے اوپر تک لاگو ہوتی ہیں۔ ریسپانسیو لے آؤٹ بنانے کے لیے بریک پوائنٹس تبدیل کریں۔
Bootstrap گرڈ پلے گراؤنڈ کے بارے میں
Bootstrap Grid Playground اصل Bootstrap 5.3 گرڈ سسٹم کے ساتھ رسپانسیو رو-اینڈ-کالم لے آؤٹس بناتا ہے۔ کسی رو میں 12 تک کالمز شامل کریں، کسی بھی کالم پر کلک کر کے اس کی چوڑائی، آفسیٹ اور ترتیب سیٹ کریں، اور رو پر گٹرز اور الائنمنٹ ایڈجسٹ کریں — پیش منظر اور تیار کردہ مارک اپ ہر تبدیلی پر لائیو اپڈیٹ ہوتے ہیں۔
چونکہ Bootstrap گرڈز mobile-first ہیں، بریک پوائنٹ سوئچر مرکزی حیثیت رکھتا ہے: بیس پر کالم کو col-6 اور md پر col-md-4 سیٹ کریں، اور آپ نے کلاسک اسٹیکس-آن-موبائل، تھری-اکراس-آن-ڈیسک ٹاپ پیٹرن بغیر ایک لائن کوڈ لکھے بنا لیا۔ آفسیٹس، ترتیب اور گٹر کلاسز سب ایک جیسے رسپانسیو انفکس لیتے ہیں۔
آؤٹ پٹ صاف کاپی-پیسٹ HTML ہے — ایک row div اپنے column بچوں اور بالکل انہی کلاسز کے ساتھ جو آپ نے کنفیگر کیں۔ پورا اسنپٹ یا صرف row کلاسز کاپی کریں؛ سب کچھ آپ کے براؤزر میں مقامی طور پر چلتا ہے۔
Bootstrap گرڈ پلے گراؤنڈ استعمال کرنے کا طریقہ
- رو میں کالمز شامل کریں — 12 تک — اور کسی ایک کو منتخب کرنے کے لیے کلک کریں۔
- موجودہ بریک پوائنٹ کے لیے منتخب کالم کا اسپین، آفسیٹ اور ترتیب سیٹ کریں۔
- بڑی اسکرینوں پر لے آؤٹ کیسے دوبارہ بہے یہ طے کرنے کے لیے بریک پوائنٹس (sm سے xxl) تبدیل کریں۔
- رو کے گٹرز اور اس کی الائنمنٹ یوٹیلٹیز ایڈجسٹ کریں۔
- لائیو پیش منظر کا جائزہ لیں، پھر تیار کردہ HTML یا row کلاسز کاپی کریں۔