बूटस्ट्रैप 4 ग्रिड - अतिरिक्त बड़ा
XLarge ग्रिड उदाहरण
| Extra small | Small | Medium | Large | Extra Large | |
|---|---|---|---|---|---|
| Class prefix | .col- |
.col-sm- |
.col-md- |
.col-lg- |
.col-xl- |
| Screen width | <576px | >=576px | >=768px | >=992px | >=1200px |
पिछले अध्याय में, हमने छोटे और मध्यम उपकरणों के लिए कक्षाओं के साथ एक ग्रिड उदाहरण प्रस्तुत किया था। हमने दो डिव (कॉलम) का उपयोग किया और हमने उन्हें छोटे उपकरणों पर 25%/75% विभाजन दिया, और मध्यम उपकरणों पर 50%/50% और बड़े उपकरणों पर 33%/66% विभाजन दिया:
<div class="col-sm-3 col-md-6 col-lg-4">....</div>
<div class="col-sm-9 col-md-6 col-lg-8">....</div>
लेकिन xlarge उपकरणों पर डिजाइन 20%/80% विभाजन के रूप में बेहतर हो सकता है।
अतिरिक्त बड़े उपकरणों को 1200 पिक्सेल और उससे अधिक की स्क्रीन की चौड़ाई के रूप में परिभाषित किया गया है ।
बड़े उपकरणों के लिए हम .col-xl-*कक्षाओं का उपयोग करेंगे:
<div class="col-sm-3 col-md-6 col-lg-4 col-xl-2">....</div>
<div class="col-sm-9 col-md-6 col-lg-8 col-xl-10">....</div>
निम्नलिखित उदाहरण के परिणामस्वरूप छोटे उपकरणों पर 25%/75% विभाजन, मध्यम उपकरणों पर 50%/50% विभाजन, और बड़े उपकरणों पर 33%/66% विभाजन और xlarge उपकरणों पर 20%/80% विभाजन होगा। अतिरिक्त छोटे उपकरणों पर, यह स्वचालित रूप से ढेर हो जाएगा (100%):
उदाहरण
<div class="container-fluid">
<div class="row">
<div class="col-sm-3 col-md-6 col-lg-4
col-xl-2">
<p>Lorem ipsum...</p>
</div>
<div class="col-sm-9 col-md-6 col-lg-8
col-xl-10">
<p>Sed ut perspiciatis...</p>
</div>
</div>
</div>
नोट: सुनिश्चित करें कि योग हमेशा 12 तक जुड़ता है।
केवल XLarge का उपयोग करना
नीचे दिए गए उदाहरण में, हम केवल .col-xl-6वर्ग (बिना .col-lg-*, .col-md-*और/या .col-sm-*) निर्दिष्ट करते हैं। इसका मतलब है कि xlarge डिवाइस 50%/50% विभाजित हो जाएंगे। हालांकि, बड़े, मध्यम, छोटे और अतिरिक्त छोटे उपकरणों के लिए, यह लंबवत रूप से स्टैक करेगा (100% चौड़ाई):
उदाहरण
<div class="container-fluid">
<div class="row">
<div class="col-xl-6">
<p>Lorem ipsum...</p>
</div>
<div class="col-xl-6">
<p>Sed ut perspiciatis...</p>
</div>
</div>
</div>
ऑटो लेआउट कॉलम
बूटस्ट्रैप 4 में, सभी उपकरणों के लिए समान चौड़ाई के कॉलम बनाने का एक आसान तरीका है: बस संख्या को हटा दें .col-xl-*और केवल .col-xlनिर्दिष्ट संख्या में
कॉल तत्वों पर वर्ग का उपयोग करें । बूटस्ट्रैप यह पहचान लेगा कि कितने कॉलम हैं, और प्रत्येक कॉलम को समान चौड़ाई मिलेगी।
यदि स्क्रीन का आकार 1200px से कम है , तो कॉलम क्षैतिज रूप से ढेर हो जाएंगे:
<!-- Two columns: 50% width on xlarge and up-->
<div class="row">
<div class="col-xl">1 of
2</div>
<div class="col-xl">2 of 2</div>
</div>
<!-- Four
columns: 25% width on xlarge and up -->
<div class="row">
<div class="col-xl">1 of 4</div>
<div class="col-xl">2 of 4</div>
<div class="col-xl">3
of 4</div>
<div class="col-xl">4 of 4</div>
</div>