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

बूटस्ट्रैप ग्रिड सिस्टम के भीतर बिल्डिंग से परिचित करावे खातिर बेसिक ग्रिड लेआउट।

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

पांच गो ग्रिड टीयर के बा

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

.कोल-4 के बा
.कोल-4 के बा
.कोल-4 के बा
.कोल-एसएम-4 के बा
.कोल-एसएम-4 के बा
.कोल-एसएम-4 के बा
.कोल-एमडी-4 के बा
.कोल-एमडी-4 के बा
.कोल-एमडी-4 के बा
.कोल-एलजी-4 के बा
.कोल-एलजी-4 के बा
.कोल-एलजी-4 के बा
.कोल-एक्सएल-4 के बा
.कोल-एक्सएल-4 के बा
.कोल-एक्सएल-4 के बा

तीन गो बराबर के स्तंभ बा

डेस्कटॉप से ​​शुरू होके बड़ डेस्कटॉप तक स्केल करे वाला तीन गो बराबर चौड़ाई वाला कॉलम पाईं . मोबाइल डिवाइस, टैबलेट अवुरी ओकरा नीचे के कॉलम अपने आप ढेर हो जाई।

.कोल-एमडी-4 के बा
.कोल-एमडी-4 के बा
.कोल-एमडी-4 के बा

तीन गो असमान स्तंभ बा

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

.कोल-एमडी-3 के बा
.कोल-एमडी-6 के बा
.कोल-एमडी-3 के बा

दू गो स्तंभ बा

डेस्कटॉप से ​​शुरू होके बड़हन डेस्कटॉप पर स्केल करे वाला दू गो कॉलम पाईं .

.कोल-एमडी-8 के बा
.कोल-एमडी-4 के बा

पूरा चौड़ाई, एकल स्तंभ के बा

पूरा चौड़ाई वाला तत्व सभ खातिर कौनों ग्रिड क्लास के जरूरत नइखे।


दू गो कॉलम जवना में दू गो नेस्टेड कॉलम होखे

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

मोबाइल डिवाइस के साइज, टैबलेट आ नीचे पर ई कॉलम आ इनहन के नेस्टेड कॉलम ढेर हो जाई।

.कोल-एमडी-8 के बा
.कोल-एमडी-6 के बा
.कोल-एमडी-6 के बा
.कोल-एमडी-4 के बा

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

बूटस्ट्रैप v4 ग्रिड सिस्टम में पाँच गो टीयर क्लास होलें: xs (अतिरिक्त छोट, ई क्लास इन्फिक्स के इस्तेमाल ना कइल जाला), sm (छोट), md (मध्यम), lg (बड़हन), आ xl (अतिरिक्त बड़हन)। रउआँ एह क्लास सभ के लगभग कौनों भी संयोजन के इस्तेमाल क के अउरी डायनामिक आ लचीला लेआउट बना सकत बानी।

क्लास सभ के हर टीयर स्केल अप हो जाला, मने कि अगर आप md, lg आ xl खातिर एकही चौड़ाई सेट करे के योजना बनावत बानी, त रउआँ के खाली md निर्दिष्ट करे के पड़ी।

.कोल-एमडी-8 के बा
.कोल-6 .कोल-एमडी-4 के बा
.कोल-6 .कोल-एमडी-4 के बा
.कोल-6 .कोल-एमडी-4 के बा
.कोल-6 .कोल-एमडी-4 के बा
.कोल-6 के बा
.कोल-6 के बा

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

.कोल-एसएम-6 .कोल-एलजी-8 के बा
.कोल-6 .कोल-एलजी-4 के बा
.कोल-6 .कोल-एसएम-4 के बा
.कोल-6 .कोल-एसएम-4 के बा
.कोल-6 .कोल-एसएम-4 के बा

कंटेनर के बा

बूटस्ट्रैप v4.4 में जोड़े वाला अतिरिक्त क्लास सभ में अइसन कंटेनर सभ के अनुमति दिहल जाला जे कौनों खास ब्रेकपॉइंट तक ले 100% चौड़ा होखे लें।

.कंटेनर के बा
.कंटेनर-एसएम के बा
.कंटेनर-एमडी के बा
.कंटेनर-एलजी के बा
.कंटेनर-एक्सएल के बा
.कंटेनर-तरल पदार्थ के बा