बूटस्ट्रैप ग्रिड के उदाहरण दिहल गइल बा
बूटस्ट्रैप ग्रिड सिस्टम के भीतर बिल्डिंग से परिचित करावे खातिर बेसिक ग्रिड लेआउट।
एह उदाहरण .themed-grid-col
सभ में कुछ थीमिंग जोड़े खातिर कॉलम सभ में क्लास जोड़ल जाला। ई अइसन क्लास ना हवे जे डिफ़ॉल्ट रूप से बूटस्ट्रैप में उपलब्ध होखे।
पांच गो ग्रिड टीयर के बा
बूटस्ट्रैप ग्रिड सिस्टम के पांच गो टीयर बा, जवन हमनी के सपोर्ट करे वाला हर रेंज के डिवाइस खातिर एगो टीयर बा। हर टीयर न्यूनतम व्यूपोर्ट साइज से शुरू होला आ जबले ओवरराइड ना कइल जाला तबले बड़ डिवाइस सभ पर स्वचालित रूप से लागू हो जाला।
तीन गो बराबर के स्तंभ बा
डेस्कटॉप से शुरू होके बड़ डेस्कटॉप तक स्केल करे वाला तीन गो बराबर चौड़ाई वाला कॉलम पाईं . मोबाइल डिवाइस, टैबलेट अवुरी ओकरा नीचे के कॉलम अपने आप ढेर हो जाई।
तीन बराबर कॉलम के विकल्प बा
क्लास के इस्तेमाल से .row-cols-*
रउआ आसानी से बराबर कॉलम वाला ग्रिड बना सकेनी।
.col
के संतान के बा
.row-cols-md-3
.col
के संतान के बा
.row-cols-md-3
.col
के संतान के बा
.row-cols-md-3
तीन गो असमान स्तंभ बा
डेस्कटॉप से शुरू होके आ बिबिध चौड़ाई के बड़हन डेस्कटॉप पर स्केल करे वाला तीन गो कॉलम पाईं । याद रखीं, ग्रिड कॉलम सभ के एकही क्षैतिज ब्लॉक खातिर बारह तक जोड़ल जाय। एकरा से अधिका, आ कॉलम ढेर होखे लागेला चाहे ऊ व्यूपोर्ट कवनो होखे.
दू गो स्तंभ बा
डेस्कटॉप से शुरू होके बड़हन डेस्कटॉप पर स्केल करे वाला दू गो कॉलम पाईं .
पूरा चौड़ाई, एकल स्तंभ के बा
पूरा चौड़ाई वाला तत्व सभ खातिर कौनों ग्रिड क्लास के जरूरत नइखे।
दू गो कॉलम जवना में दू गो नेस्टेड कॉलम होखे
दस्तावेजीकरण के अनुसार, नेस्टिंग आसान बा-बस कौनों मौजूदा कॉलम के भीतर कॉलम सभ के पंक्ति रखीं। एह से रउआँ के डेस्कटॉप से शुरू होखे वाला आ बड़हन डेस्कटॉप में स्केल करे वाला दू गो कॉलम मिल जाई , बड़ कॉलम के भीतर दू गो अउरी (बराबर चौड़ाई) के साथ।
मोबाइल डिवाइस के साइज, टैबलेट आ नीचे पर ई कॉलम आ इनहन के नेस्टेड कॉलम ढेर हो जाई।
मिश्रित: मोबाइल आ डेस्कटॉप बा
बूटस्ट्रैप v4 ग्रिड सिस्टम में पाँच गो टीयर क्लास होलें: xs (अतिरिक्त छोट, ई क्लास इन्फिक्स के इस्तेमाल ना कइल जाला), sm (छोट), md (मध्यम), lg (बड़हन), आ xl (अतिरिक्त बड़हन)। रउआँ एह क्लास सभ के लगभग कौनों भी संयोजन के इस्तेमाल क के अउरी डायनामिक आ लचीला लेआउट बना सकत बानी।
क्लास सभ के हर टीयर स्केल अप हो जाला, मने कि अगर आप md, lg आ xl खातिर एकही चौड़ाई सेट करे के योजना बनावत बानी, त रउआँ के खाली md निर्दिष्ट करे के पड़ी।
मिश्रित: मोबाइल, टैबलेट, आ डेस्कटॉप बा
गटर के बा
.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
ब्रेकपॉइंट जोड़त बा।