बूटस्ट्रैप 4 ग्रिड उदाहरण
नीचे हमने बूटस्ट्रैप 4 ग्रिड लेआउट के कुछ उदाहरण एकत्र किए हैं।
तीन समान कॉलम
निर्दिष्ट संख्या में तत्वों पर वर्ग का उपयोग करें .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>
अधिक समान कॉलम
उदाहरण
<!-- Two equal columns -->
<div class="row">
<div class="col">1 of 2</div>
<div class="col">2 of 2</div>
</div>
<!-- Four equal columns -->
<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>
<!-- Six equal columns -->
<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-*आप कक्षाओं के साथ यह भी नियंत्रित कर सकते हैं कि कितने कॉलम एक दूसरे के बगल में दिखाई देने चाहिए (चाहे कितने भी कॉलम हों) :
उदाहरण
<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>
अधिक असमान कॉलम
उदाहरण
<!-- Two Unequal
Columns -->
<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>
समान ऊँचाई
यदि कॉलम में से एक दूसरे से लंबा है (पाठ या सीएसएस ऊंचाई के कारण), तो बाकी का पालन करेंगे:
उदाहरण
<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>
उत्तरदायी वर्ग
बूटस्ट्रैप 4 ग्रिड सिस्टम में पांच वर्ग हैं:
.col-(अतिरिक्त छोटे उपकरण - स्क्रीन की चौड़ाई 576px से कम).col-sm-(छोटे उपकरण - स्क्रीन की चौड़ाई 576px के बराबर या उससे अधिक).col-md-(मध्यम उपकरण - स्क्रीन की चौड़ाई 768px के बराबर या उससे अधिक).col-lg-(बड़े उपकरण - स्क्रीन की चौड़ाई 992px के बराबर या उससे अधिक).col-xl-(xबड़ा उपकरण - स्क्रीन की चौड़ाई 1200px के बराबर या उससे अधिक)
अधिक गतिशील और लचीले लेआउट बनाने के लिए उपरोक्त कक्षाओं को जोड़ा जा सकता है।
युक्ति: प्रत्येक वर्ग बढ़ता है, इसलिए यदि आप
smऔर के लिए समान चौड़ाई निर्धारित करना चाहते हैं, तो mdआपको केवल निर्दिष्ट करने की आवश्यकता है sm।
क्षैतिज करने के लिए स्टैक्ड
निम्न उदाहरण दिखाता है कि बड़े उपकरणों (एसएम, एमडी, एलजी और एक्सएल) पर क्षैतिज बनने से पहले, अतिरिक्त छोटे उपकरणों पर स्टैक्ड होने वाले कॉलम लेआउट को कैसे बनाया जाए:
उदाहरण
<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% split on extra small devices and 75%/25% split on larger devices
-->
<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% split
on extra small, small and medium devices and 66.3%/33.3% split on large and
xlarge devices -->
<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% split on small devices, a 50%/50% split
on medium devices, and a 33%/66% split on large and xlarge devices. On extra
small devices, it will automatically stack (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>
कोई गटर नहीं
गटर (अतिरिक्त स्थान) को हटाने .no-guttersके लिए कक्षा को कंटेनर में जोड़ें :.row
कम से कम आने के उद्देश्य से, हममें से कौन किसी रोजगार का प्रयोग करे सिवाय उसके परिणामों का लाभ उठाने के।
उदाहरण
<div class="row no-gutters">