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

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

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

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

.कोल-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 (अतिरिक्त बड़हन)। रउआँ एह क्लास सभ के लगभग कौनों भी संयोजन के इस्तेमाल क के अउरी डायनामिक आ लचीला लेआउट बना सकत बानी।

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

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

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

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