बूटस्ट्रैप 4 ग्रिड अतिरिक्त छोटा
अतिरिक्त लघु ग्रिड उदाहरण
| 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% विभाजित हों ।
हम निम्नलिखित वर्गों को अपने दो स्तंभों में जोड़ेंगे:
<div class="col-3">....</div>
<div class="col-9">....</div>
निम्नलिखित उदाहरण के परिणामस्वरूप सभी उपकरणों (अतिरिक्त छोटे, छोटे, मध्यम, बड़े और बड़े) पर 25%/75% विभाजन होगा।
उदाहरण
<div class="container-fluid">
<div class="row">
<div class="col-3 bg-success">
<p>Lorem ipsum...</p>
</div>
<div class="col-9 bg-warning">
<p>Sed ut perspiciatis...</p>
</div>
</div>
</div>
नोट: सुनिश्चित करें कि योग 12 या उससे कम तक जुड़ता है (यह आवश्यक नहीं है कि आप सभी 12 उपलब्ध कॉलमों का उपयोग करें):
33.3%/66.6% विभाजन के लिए, आप उपयोग करेंगे .col-4और .col-8(और 50%/50% विभाजन के लिए, आप उपयोग करेंगे .col-6और .col-6):
उदाहरण
<!-- 33.3%/66.6% split -->
<div class="container-fluid">
<div class="row">
<div class="col-4 bg-success">
<p>Lorem ipsum...</p>
</div>
<div class="col-8 bg-warning">
<p>Sed ut perspiciatis...</p>
</div>
</div>
</div>
<!-- 50%/50% split -->
<div class="container-fluid">
<div class="row">
<div class="col-6 bg-success">
<p>Lorem ipsum...</p>
</div>
<div class="col-6 bg-warning">
<p>Sed ut perspiciatis...</p>
</div>
</div>
</div>
ऑटो लेआउट कॉलम
बूटस्ट्रैप 4 में, सभी उपकरणों के लिए समान चौड़ाई के कॉलम बनाने का एक आसान तरीका है: बस संख्या को हटा दें .col-*और केवल .colनिर्दिष्ट संख्या में
कॉल तत्वों पर वर्ग का उपयोग करें । बूटस्ट्रैप यह पहचान लेगा कि कितने कॉलम हैं, और प्रत्येक कॉलम को समान चौड़ाई मिलेगी:
<!-- Two columns: 50% width-->
<div class="row">
<div class="col">1 of
2</div>
<div class="col">2 of 2</div>
</div>
<!-- Four
columns: 25% width-->
<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>
अगला अध्याय दिखाता है कि छोटे उपकरणों के लिए एक अलग विभाजन प्रतिशत कैसे जोड़ा जाए।