Bootstrap 5 ग्रिड: से ढकला सीधा

ग्रिड उदाहरण: आड़े पर ढकला

हम एक मूलभूत ग्रिड सिस्टम बनाएं, जो शुरू में छोटे उपकरणों पर ढकला होगा और बड़े उपकरणों पर सीधा होगा。

नीचे का उदाहरण एक साधारण 'आड़े पर ढकला' की दो स्तम्भ लेआउट को दिखाता है, इसका मतलब है कि यह सभी स्क्रीनों पर 50%/50% का विभाजन पैदा करेगा, छोटे से स्क्रीनों को छोड़कर, जहां यह स्वचालित रूप से ढकला (100%) होगा:

उदाहरण: आड़े पर ढकला

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-6 bg-primary">
      <p>स्तम्भ 1 ...</p>
    </div>
    <div class="col-sm-6 bg-dark">
      <p>स्तम्भ 2 ...</p>
    </div>
  </div>
</div>

अपने आप से प्रयास करें

सूचना:.col-sm-* क्लास में की गई संख्या इंगित करती है कि div कितने स्तम्भ को चौड़ाई देनी चाहिए (कुल 12 स्तम्भ)। इसलिए,.col-sm-1 1 स्तम्भ पर चलने वाला है,.col-sm-4 4 स्तम्भ पर चलने वाला है,.col-sm-6 6 स्तम्भ पर चलने वाला है, आदि।

ध्यान:कृपया यह सुनिश्चित करें कि कुल 12 (सभी 12 उपलब्ध स्तम्भ का उपयोग नहीं करते हैं) बढ़ नहीं है:

सूचना:को बदल सकते हैं .container-fluid क्लास को .containerइसके बाद, आप किसी भी full-width लेआउट को बदलें fixed-width के प्रतिसादी रेखाचित्रण:

उदाहरण: प्रतिसादी कंटेनर

<div class="container">
  <div class="row">
    <div class="col-sm-6">
      <p>स्तम्भ 1 ...</p>
    </div>
    <div class="col-sm-6">
      <p>स्तम्भ 2 ...</p>
    </div>
  </div>
</div>

अपने आप से प्रयास करें

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

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

<!-- दो स्तम्भ: सभी स्क्रीनों पर 50% चौड़ाई, छोटे उपकरण (100% चौड़ाई) को छोड़कर -->
<div class="row">
  <div class="col-sm">1 of 2</div>
  <div class="col-sm">2 of 2</div>
</div>
<!-- चार स्तम्भ: सभी स्क्रीनों पर 25% चौड़ाई, छोटे उपकरण (100% चौड़ाई) को छोड़कर -->
<div class="row">
  <div class="col-sm">1 of 4</div>
  <div class="col-sm">2 of 4</div>
  <div class="col-sm">3 of 4</div>
  <div class="col-sm">4 of 4</div>
</div>

अपने आप से प्रयास करें