Bootstrap Flex प्लेग्राउंड
Bootstrap 5.3 flex लेआउट को विज़ुअली बनाएं और सटीक यूटिलिटी क्लास कॉपी करें — d-flex, justify-content, align-items, order, grow और बहुत कुछ।
—
सब कुछ आपके ब्राउज़र में चलता है — कुछ भी अपलोड नहीं होता।
आपके द्वारा सेट की गई क्लास इस ब्रेकपॉइंट से और ऊपर लागू होती हैं। रिस्पॉन्सिव लेआउट बनाने के लिए ब्रेकपॉइंट बदलें।
Bootstrap Flex प्लेग्राउंड के बारे में
Bootstrap Flex Playground आपको कच्चे CSS के बजाय असली Bootstrap 5.3 यूटिलिटी क्लासेस के साथ फ्लेक्सबॉक्स लेआउट बनाने देता है। कंटेनर को कॉन्फ़िगर करें — direction, wrapping, justify-content, align-items, gap — सेगमेंटेड कंट्रोल्स के साथ, किसी भी आइटम पर क्लिक करके उसका अपना align-self, order, grow और shrink यूटिलिटी सेट करें, और लाइव प्रीव्यू को तुरंत पुनर्व्यवस्थित होते देखें।
ब्रेकपॉइंट स्विचर इसे महज एक खिलौने से ज्यादा बनाता है: sm, md, lg, xl या xxl चुनें और उस बिंदु से आपके द्वारा सेट की गई क्लासेस रिस्पॉन्सिव इनफिक्स प्राप्त कर लेती हैं — justify-content-md-between, flex-lg-row — बिल्कुल वैसे ही जैसे Bootstrap का मोबाइल-फर्स्ट सिस्टम उस ब्रेकपॉइंट और उससे ऊपर लागू करता है। एक वास्तविक कंपोनेंट सिमुलेट करने के लिए 12 तक आइटम जोड़ें।
जब लेआउट सही लगे, तो जनरेट किया गया HTML या सिर्फ कंटेनर क्लासेस कॉपी करें और उन्हें सीधे अपने प्रोजेक्ट में पेस्ट करें। सब कुछ आपके ब्राउज़र में चलता है और कुछ भी अपलोड नहीं होता।
Bootstrap Flex प्लेग्राउंड का उपयोग कैसे करें
- सेगमेंटेड कंट्रोल्स के साथ कंटेनर यूटिलिटी सेट करें — direction, wrap, justify-content, align-items और gap।
- अपने असली कंपोनेंट से मेल खाने के लिए आइटम जोड़ें या हटाएं (2 से 12)।
- किसी आइटम को उसका अपना align-self, order या फ्लेक्स साइज़िंग यूटिलिटी देने के लिए उस पर क्लिक करें।
- sm, md, lg, xl या xxl से ऊपर लागू होने वाले रिस्पॉन्सिव वैरिएंट जोड़ने के लिए ब्रेकपॉइंट बदलें।
- लाइव प्रीव्यू जांचें, फिर जनरेट किया गया HTML या कंटेनर क्लासेस कॉपी करें।