बूस्ट्रैप 5 ग्रिड इस्टेंस
- पिछला पृष्ठ BS5 ग्रिड XXL
- अगला पृष्ठ BS5 बेस टैम्पलेट
अब हमने बूथस्टैप 5 ग्रिड लेआउट के कुछ इस्टेंस जमा किए हैं।
तीन समान स्तम्भ
निर्दिष्ट संख्या के एलिमेंटों पर .col का उपयोग करके .col कोटि का उपयोग करके निर्दिष्ट संख्या के एलिमेंटों पर, Bootstrap तय करेगा कितने एलिमेंट हैं (और समान आकार के स्तम्भ बनाएगा)। नीचे के उदाहरण में, हमने तीन col एलिमेंट इस्तेमाल किए हैं, जिनका आकार 33.33% है।
उदाहरण
<div class="row"> <div class="col">col</div> <div class="col">col</div> <div class="col">col</div> </div>
अंकों का इस्तेमाल करने वाले तीन समान स्तम्भ
आप अंकों का इस्तेमाल करके स्तम्भ आकार को नियंत्रित कर सकते हैं। सुनिश्चित करें कि कुल 12 (सभी 12 उपलब्ध स्तम्भों का इस्तेमाल नहीं करना) के बराबर या कम है (आवश्यक नहीं है):
उदाहरण
<div class="row"> <div class="col-4">col-4</div> <div class="col-4">col-4</div> <div class="col-4">col-4</div> </div>
तीन असमान स्तम्भ
असमान स्तम्भ बनाने के लिए, आपको संख्या का इस्तेमाल करना होगा। नीचे दिए उदाहरण में 25%/50%/25% का विभाजन बनाया जाएगा:
उदाहरण
<div class="row"> <div class="col-3">col-3</div> <div class="col-6">col-6</div> <div class="col-3">col-3</div> </div>
स्तम्भ आकार नियत करना
तथापि, केवल एक स्तम्भ का आकार नियत करने से पर्याप्त है, और भाईयों को चारों ओर स्वचालित रूप से आकार समायोजित करने दें। नीचे दिए उदाहरण में 25%/50%/25% का विभाजन बनाया जाएगा:
उदाहरण
<div class="row"> <div class="col">col</div> <div class="col-6">col-6</div> <div class="col">col</div> </div>
अधिक समान स्तम्भ
उदाहरण
<!-- दो समान स्तम्भ --> <div class="row"> <div class="col">1 of 2</div> <div class="col">2 of 2</div> </div> <!-- चार समान स्तम्भ --> <div class="row"> <div class="col">1 of 4</div> <div class="col">2 of 4</div> <div class="col">3 of 4</div> <div class="col">4 of 4</div> </div> <!-- छह समान स्तम्भ --> <div class="row"> <div class="col">1 of 6</div> <div class="col">2 of 6</div> <div class="col">3 of 6</div> <div class="col">4 of 6</div> <div class="col">5 of 6</div> <div class="col">6 of 6</div> </div>
Row Cols
आप इसके साथ इस्तेमाल कर सकते हैं .row-cols-* कोटि नियंत्रण को एकदम बगल स्तम्भों में प्रदर्शित होना चाहिए (कितने स्तम्भ हो):
उदाहरण
<div class="row row-cols-1"> <div class="col">1 of 2</div> <div class="col">2 of 2</div> </div> <div class="row row-cols-2"> <div class="col">1 of 4</div> <div class="col">2 of 4</div> <div class="col">3 of 4</div> <div class="col">4 of 4</div> </div> <div class="row row-cols-3"> <div class="col">1 of 6</div> <div class="col">2 of 6</div> <div class="col">3 of 6</div> <div class="col">4 of 6</div> <div class="col">5 of 6</div> <div class="col">6 of 6</div> </div>
अधिक असमान स्तम्भ
उदाहरण
<!-- दो असमान स्तम्भ --> <div class="row"> <div class="col-8">1 of 2</div> <div class="col-4">2 of 2</div> </div> <!-- Four unequal columns --> <div class="row"> <div class="col-2">1 of 4</div> <div class="col-2">2 of 4</div> <div class="col-2">3 of 4</div> <div class="col-6">4 of 4</div> </div> <!-- Setting two column widths --> <div class="row"> <div class="col-4">1 of 4</div> <div class="col-6">2 of 4</div> <div class="col">3 of 4</div> <div class="col">4 of 4</div> </div>
समान ऊंचाई
यदि एक स्तंभ दूसरे से अधिक ऊंचा है (पाठ या CSS ऊंचाई के कारण), तो बाकी इसके अनुसार चलेगा:
उदाहरण
<div class="row"> <div class="col">Lorem ipsum...</div> <div class="col">col</div> <div class="col">col</div> </div>
अंतर्निहित स्तंभ
इस उदाहरण में, कैसे दो स्तंभ रचना बनाए जाती है, जिसमें एक स्तंभ में दो और स्तंभ हैं:
उदाहरण
<div class="row">
<div class="col-8">
.col-8
<div class="row">
<div class="col-6">.col-6</div>
<div class="col-6">.col-6</div>
</div>
</div>
<div class="col-4">.col-4</div>
</div>
प्रतिक्रियाशील वर्ग
Bootstrap 5 ग्रिड सिस्टम में पांच वर्ग हैं:
.col-(अति-सूक्ष्म उपकरण - स्क्रीन चौड़ाई 576px से कम है).col-sm-(छोटे उपकरण - स्क्रीन चौड़ाई 576px या इससे कम है).col-md-(मध्यम उपकरण - स्क्रीन चौड़ाई 768 पिक्सल या इससे अधिक है).col-lg-(बड़े उपकरण - स्क्रीन चौड़ाई 992 पिक्सल या इससे अधिक है).col-xl-(एक्स-लार्ज उपकरण - स्क्रीन चौड़ाई 1200px या इससे अधिक है).col-xxl-(एक्स-लार्ज उपकरण - स्क्रीन चौड़ाई 1400px या इससे अधिक है)
उपरोक्त वर्गों को संयोजित करके अधिक गतिशील और लचीले रचना बनाए जा सकते हैं。
सूचना:प्रत्येक वर्ग अनुपातिक रूप से विस्तारित होता है, इसलिए यदि आप विशेषतः sm और md यदि आप विशेषतः एक ही चौड़ाई निर्धारित करना चाहते हैं, तो केवल इसे निर्धारित करने की आवश्यकता है sm。
स्टेकिड से स्तरीय
इस उदाहरण में, कैसे स्तंभ रचना बनाए जाती है, जो प्रारंभ में अति-सूक्ष्म उपकरणों पर स्टेकिड होती है और फिर बड़े उपकरणों (sm, md, lg और xl) पर स्तरीय रचना में बदलती है:
उदाहरण
<div class="row"> <div class="col-sm-9">col-sm-9</div> <div class="col-sm-3">col-sm-3</div> </div> <div class="row"> <div class="col-sm">col-sm</div> <div class="col-sm">col-sm</div> <div class="col-sm">col-sm</div> </div>
मिक्स और मैच
उदाहरण
<!-- सूक्ष्म उपकरणों पर 50%/50% विभाजन, बड़े उपकरणों पर 75%/25% विभाजन --> <div class="row"> <div class="col-6 col-sm-9">col-6 col-sm-9</div> <div class="col-6 col-sm-3">col-6 col-sm-3</div> </div> <!-- सूक्ष्म, छोटे, मध्यम उपकरणों पर 58%/42% विभाजन, बड़े और अति-बड़े उपकरणों पर 66.3%/33.3% विभाजन --> <div class="row"> <div class="col-7 col-lg-8">col-7 col-lg-8</div> <div class="col-5 col-lg-4">col-5 col-lg-4</div> </div> <!-- सूक्ष्म उपकरणों पर 25%/75% विभाजन, मध्यम उपकरणों पर 50%/50% विभाजन, बड़े और अति-बड़े उपकरणों पर 33%/66% विभाजन। सूक्ष्म उपकरणों पर स्वचालित ढकलन (100%) --> <div class="row"> <div class="col-sm-3 col-md-6 col-lg-4">col-sm-3 col-md-6 col-lg-4</div> <div class="col-sm-9 col-md-6 col-lg-8">col-sm-9 col-md-6 col-lg-8</div> </div>
बिना gutter
अगर आप स्तम्भों के बीच की दूरी (अतिरिक्त अंतर) बदलना चाहते हैं, तो किसी भी .g-1|2|3|4|5 क्लास (.g-4 यह डिफ़ॉल्ट मान है)।
अगर आप पूरी तरह से बांध (gutter) हटाना चाहते हैं, तो इस्तेमाल करें .g-0：
उदाहरण
<div class="row g-0">
- पिछला पृष्ठ BS5 ग्रिड XXL
- अगला पृष्ठ BS5 बेस टैम्पलेट
