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

बूटस्ट्रैप ग्रिड सिस्टम कें भीतर निर्माण सं परिचित करय कें लेल बेसिक ग्रिड लेआउट.

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

पाँच ग्रिड टीयर

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

.कोल-4 के
.कोल-4 के
.कोल-4 के
.कोल-स्म-4
.कोल-स्म-4
.कोल-स्म-4
.कोल-एमडी-4
.कोल-एमडी-4
.कोल-एमडी-4
.कोल-एलजी-4
.कोल-एलजी-4
.कोल-एलजी-4
.कोल-एक्सएल-4
.कोल-एक्सएल-4
.कोल-एक्सएल-4
.कोल-xxl-4
.कोल-xxl-4
.कोल-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

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

बूटस्ट्रैप 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

गटर

कक्षाक कें साथ .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
.पात्र-द्रव