Bootstrap 5 ग्रिड: XXL

XXL उपकरण ग्रिड इंस्टेंस

एक्सट्रा-स्माल स्माल मीडियम लार्ज एक्सट्रा लार्ज XXL
क्लास पूर्व-संयोजक .col- .col-sm- .col-md- .col-lg- .col-xl- .col-xxl-
स्क्रीन चौड़ाई <576px >=576px >=768px >=992px >=1200px >=1400px

XXL उपकरण को 1400 पिक्सल और इससे अधिकके स्क्रीन चौड़ाई।

इस उदाहरण में मध्यम, बड़े और अति-बड़े उपकरणों पर 50%/50% का विभाजन होगा, XXL उपकरण पर 25%/75% का विभाजन होगा। छोटे और अति-छोटे उपकरणों पर यह स्वचालित रूप से स्टेक (100%) होगा:

इंस्टैंस

<div class="container-fluid">
  <div class="row">
    <div class="col-md-6 col-xxl-3">
      <p>विश्व प्राकृतिक संसाधन फाउंडेशन (WWF), 29 अप्रैल 1961 को स्थापित, उसका प्रतीक एक बिंदू भालू है ...</p>
    </div>
    <div class="col-md-6 col-xxl-9">
      <p>1980 में, WWF आधिकारिक तौर पर चीन में आया, चीन सरकार के आमंत्रण पर, बिंदू भालू और उसके आवास की सुरक्षा कार्य करने के लिए आया ...</p>
    </div>
  </div>
</div>

अपने आप सामने देखें

ध्यान दें:सुनिश्चित करें कि कुल सभी समय 12 हों।

केवल XXL

इसमें, हम केवल .col-xxl-6 क्लास (बिना .col-md-* और / या .col-sm-*）。इसका मतलब है कि xxlarge उपकरण 50/50% विभाजित करेगा। लेकिन, अधिक बड़े, बड़े, मध्यम, छोटे और अति-छोटे उपकरणों के लिए यह ऊर्ध्व ढाल बनाए रखेगा (100% चौड़ाई):

इंस्टैंस

<div class="container-fluid">
  <div class="row">
    <div class="col-xxl-6">
      <p>विश्व प्राकृतिक संसाधन फाउंडेशन (WWF), 29 अप्रैल 1961 को स्थापित, उसका प्रतीक एक बिंदू भालू है ...</p>
    </div>
    <div class="col-xxl-6">
      <p>1980 में, WWF आधिकारिक तौर पर चीन में आया, चीन सरकार के आमंत्रण पर, बिंदू भालू और उसके आवास की सुरक्षा कार्य करने के लिए आया ...</p>
    </div>
  </div>
</div>

अपने आप सामने देखें

स्वचालित लेआउट स्तम्भ

बूटस्ट्रैप 5 में, सभी उपकरणों के लिए समान चौड़ाई वाले स्तम्भ बनाने के लिए एक सरल तरीका है: केवल .col-xxl-* संख्या को निकालें और केवल col एलीमेंट पर इस्तेमाल करें .col-xxl क्लास। बूटस्ट्रैप उसे पहचानेगा कि कितने स्तम्भ हैं और प्रत्येक स्तम्भ को एक-सी चौड़ाई मिलेगी।

यदि स्क्रीन आकार1400px से कमइसके बाद, स्तम्भ को आड़ा स्तम्भ के रूप में ठीक करेंगे:

<!-- दो स्तम्भ: विशाल या उससे बड़े उपकरणों में 50% चौड़ाई है -->
<div class="row">
  <div class="col-xxl">1 of 2</div>
  <div class="col-xxl">2 of 2</div>
</div>
<!-- चार स्तम्भ: विशाल या उससे बड़े उपकरणों में 25% चौड़ाई है -->
<div class="row">
  <div class="col-xxl">1 of 4</div>
  <div class="col-xxl">2 of 4</div>
  <div class="col-xxl">3 of 4</div>
  <div class="col-xxl">4 of 4</div>
</div>

अपने आप सामने देखें