बूटस्ट्रैप ग्रिड उदाहरण

बूटस्ट्रैप ग्रिड सिस्टम के भीतर भवन निर्माण से परिचित कराने के लिए बुनियादी ग्रिड लेआउट।

इन उदाहरणों में .themed-grid-colकुछ थीम जोड़ने के लिए वर्ग को कॉलम में जोड़ा जाता है। यह एक ऐसा वर्ग नहीं है जो डिफ़ॉल्ट रूप से बूटस्ट्रैप में उपलब्ध है।

पांच ग्रिड स्तर

बूटस्ट्रैप ग्रिड सिस्टम में पाँच स्तर हैं, प्रत्येक श्रेणी के उपकरणों के लिए एक जो हम समर्थन करते हैं। प्रत्येक टियर न्यूनतम व्यूपोर्ट आकार से शुरू होता है और बड़े उपकरणों पर स्वचालित रूप से लागू होता है जब तक कि इसे ओवरराइड न किया जाए।

.col-4
.col-4
.col-4
.col-sm-4
.col-sm-4
.col-sm-4
.col-md-4
.col-md-4
.col-md-4
.col-lg-4
.col-lg-4
.col-lg-4
.col-xl-4
.col-xl-4
.col-xl-4
.col-xxl-4
.col-xxl-4
.col-xxl-4

तीन बराबर कॉलम

तीन समान-चौड़ाई वाले कॉलम डेस्कटॉप से ​​शुरू करें और बड़े डेस्कटॉप पर स्केलिंग करें । मोबाइल डिवाइस, टैबलेट और उसके नीचे के कॉलम स्वचालित रूप से स्टैक हो जाएंगे।

.col-md-4
.col-md-4
.col-md-4

तीन बराबर कॉलम वैकल्पिक

कक्षाओं का उपयोग करके .row-cols-*, आप आसानी से समान स्तंभों वाला ग्रिड बना सकते हैं।

.colके संतान .row-cols-md-3
.colके संतान .row-cols-md-3
.colके संतान .row-cols-md-3

तीन असमान स्तंभ

डेस्कटॉप पर शुरू होने वाले तीन कॉलम प्राप्त करें और विभिन्न चौड़ाई के बड़े डेस्कटॉप तक स्केलिंग करें । याद रखें, ग्रिड कॉलम को एक क्षैतिज ब्लॉक के लिए बारह तक जोड़ना चाहिए। इससे भी अधिक, और कॉलम व्यूपोर्ट की परवाह किए बिना स्टैकिंग करना शुरू कर देते हैं।

.col-md-3
.col-md-6
.col-md-3

दो कॉलम

डेस्कटॉप पर शुरू होने वाले और बड़े डेस्कटॉप पर स्केलिंग करने वाले दो कॉलम प्राप्त करें ।

.col-md-8
.col-md-4

पूरी चौड़ाई, सिंगल कॉलम

पूर्ण-चौड़ाई वाले तत्वों के लिए कोई ग्रिड वर्ग आवश्यक नहीं है।

दो नेस्टेड स्तंभों के साथ दो स्तंभ

दस्तावेज़ीकरण के अनुसार, नेस्टिंग करना आसान है—बस मौजूदा कॉलम में कॉलम की एक पंक्ति डालें। यह आपको डेस्कटॉप से ​​शुरू होने वाले और बड़े डेस्कटॉप पर स्केलिंग करने वाले दो कॉलम देता है, बड़े कॉलम के भीतर अन्य दो (समान चौड़ाई) के साथ।

मोबाइल डिवाइस के आकार, टैबलेट और डाउन पर, ये कॉलम और उनके नेस्टेड कॉलम स्टैक हो जाएंगे।

.col-md-8
.col-md-6
.col-md-6
.col-md-4

मिश्रित: मोबाइल और डेस्कटॉप

बूटस्ट्रैप v5 ग्रिड सिस्टम में वर्गों के छह स्तर हैं: xs (अतिरिक्त छोटा, इस वर्ग इंफिक्स का उपयोग नहीं किया जाता है), sm (छोटा), md (मध्यम), lg (बड़ा), xl (x-बड़ा), और xxl (xx) -विशाल)। अधिक गतिशील और लचीले लेआउट बनाने के लिए आप इन वर्गों के लगभग किसी भी संयोजन का उपयोग कर सकते हैं।

कक्षाओं का प्रत्येक स्तर बढ़ता है, जिसका अर्थ है कि यदि आप md, lg, xl और xxl के लिए समान चौड़ाई निर्धारित करने की योजना बनाते हैं, तो आपको केवल md निर्दिष्ट करने की आवश्यकता है।

.col-md-8
.col-6 .col-md-4
.col-6 .col-md-4
.col-6 .col-md-4
.col-6 .col-md-4
.col-6
.col-6

मिश्रित: मोबाइल, टैबलेट और डेस्कटॉप

.col-sm-6 .col-lg-8
.col-6 .col-lg-4
.col-6 .col-sm-4
.col-6 .col-sm-4
.col-6 .col-sm-4

गटर

कक्षाओं के साथ .gx-*, क्षैतिज गटर को समायोजित किया जा सकता है।

.col.gx-4गटर के साथ
.col.gx-4गटर के साथ
.col.gx-4गटर के साथ
.col.gx-4गटर के साथ
.col.gx-4गटर के साथ
.col.gx-4गटर के साथ

.gy-*ऊर्ध्वाधर गटर को नियंत्रित करने के लिए कक्षाओं का प्रयोग करें ।

.col.gy-4गटर के साथ
.col.gy-4गटर के साथ
.col.gy-4गटर के साथ
.col.gy-4गटर के साथ
.col.gy-4गटर के साथ
.col.gy-4गटर के साथ

कक्षाओं के साथ .g-*, दोनों दिशाओं में गटर को समायोजित किया जा सकता है।

.col.g-3गटर के साथ
.col.g-3गटर के साथ
.col.g-3गटर के साथ
.col.g-3गटर के साथ
.col.g-3गटर के साथ
.col.g-3गटर के साथ

कंटेनरों

बूटस्ट्रैप v4.4 में जोड़े गए अतिरिक्त वर्ग उन कंटेनरों को अनुमति देते हैं जो एक विशेष ब्रेकपॉइंट तक 100% चौड़े होते हैं। v5 एक नया xxlब्रेकप्वाइंट जोड़ता है।

कंटेनर
.कंटेनर-एसएम
.कंटेनर-एमडी
.कंटेनर-एलजी
.कंटेनर-xl
.कंटेनर-xxl
.container-द्रव