Bootstrap ग्रिड प्लेग्राउंड
Bootstrap 5.3 ग्रिड लेआउट को दृश्य रूप से बनाएं और सटीक क्लास कॉपी करें — row, col, ऑफसेट, क्रम, गटर और संरेखण।
—
सब कुछ आपके ब्राउज़र में चलता है — कुछ भी अपलोड नहीं होता।
आपके द्वारा सेट की गई क्लास इस ब्रेकपॉइंट और उससे ऊपर लागू होती हैं। रिस्पॉन्सिव लेआउट बनाने के लिए ब्रेकपॉइंट बदलें।
Bootstrap ग्रिड प्लेग्राउंड के बारे में
Bootstrap Grid Playground असली Bootstrap 5.3 ग्रिड सिस्टम के साथ रिस्पॉन्सिव रो-और-कॉलम लेआउट बनाता है। एक रो में 12 तक कॉलम जोड़ें, किसी भी कॉलम पर क्लिक करके उसकी चौड़ाई, ऑफसेट और ऑर्डर सेट करें, और रो पर गटर तथा एलाइनमेंट एडजस्ट करें — हर बदलाव पर प्रीव्यू और जनरेट किया गया मार्कअप लाइव अपडेट होता है।
चूंकि Bootstrap ग्रिड मोबाइल-फर्स्ट हैं, ब्रेकपॉइंट स्विचर केंद्रीय है: किसी कॉलम को बेस पर col-6 और md पर col-md-4 सेट करें, और आपने बिना कोई कोड लिखे मोबाइल पर स्टैक होने वाला, डेस्कटॉप पर तीन-आड़े वाला क्लासिक पैटर्न बना लिया। ऑफसेट, ऑर्डर और गटर क्लासेस सभी एक जैसी रिस्पॉन्सिव इनफिक्स लेती हैं।
आउटपुट साफ कॉपी-पेस्ट HTML है — एक रो div अपने कॉलम चाइल्ड और आपके द्वारा कॉन्फ़िगर की गई ठीक उन्हीं क्लासेस के साथ। पूरा स्निपेट या सिर्फ रो क्लासेस कॉपी करें; सब कुछ आपके ब्राउज़र में स्थानीय रूप से चलता है।
Bootstrap ग्रिड प्लेग्राउंड का उपयोग कैसे करें
- रो में कॉलम जोड़ें — 12 तक — और किसी एक को चुनने के लिए उस पर क्लिक करें।
- वर्तमान ब्रेकपॉइंट के लिए चुने गए कॉलम का span, offset और order सेट करें।
- यह परिभाषित करने के लिए ब्रेकपॉइंट बदलें (sm से xxl) कि बड़ी स्क्रीन पर लेआउट कैसे बदलता है।
- रो के गटर और उसकी एलाइनमेंट यूटिलिटी एडजस्ट करें।
- लाइव प्रीव्यू देखें, फिर जनरेट किया गया HTML या रो क्लासेस कॉपी करें।