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

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

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

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

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

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

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

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

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

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

क्लास के इस्तेमाल से .row-cols-*रउआ आसानी से बराबर कॉलम वाला ग्रिड बना सकेनी।

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

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

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

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

दू गो स्तंभ बा

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

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

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

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


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

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

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

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

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

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

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

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

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

.कोल-एसएम-6 .कोल-एलजी-8 के बा
.कोल-6 .कोल-एलजी-4 के बा
.कोल-6 .कोल-एसएम-4 के बा
.कोल-6 .कोल-एसएम-4 के बा
.कोल-6 .कोल-एसएम-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ब्रेकपॉइंट जोड़त बा।

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