ग्रिड प्रणाली

बारह कॉलम सिस्टम, पांच डिफ़ॉल्ट रिस्पॉन्सिव टियर, सैस वेरिएबल्स और मिक्सिन और दर्जनों पूर्वनिर्धारित कक्षाओं के लिए धन्यवाद, सभी आकारों और आकारों के लेआउट बनाने के लिए हमारे शक्तिशाली मोबाइल-फर्स्ट फ्लेक्सबॉक्स ग्रिड का उपयोग करें।

यह काम किस प्रकार करता है

बूटस्ट्रैप का ग्रिड सिस्टम सामग्री को लेआउट और संरेखित करने के लिए कंटेनरों, पंक्तियों और स्तंभों की एक श्रृंखला का उपयोग करता है। यह फ्लेक्सबॉक्स के साथ बनाया गया है और पूरी तरह उत्तरदायी है। नीचे एक उदाहरण दिया गया है और गहराई से देखें कि ग्रिड कैसे एक साथ आता है।

फ्लेक्सबॉक्स के लिए नया या अपरिचित? पृष्ठभूमि, शब्दावली, दिशानिर्देश और कोड स्निपेट के लिए इस CSS ट्रिक्स फ्लेक्सबॉक्स गाइड को पढ़ें ।

तीन स्तंभों में से एक

<div class="container">
  <div class="row">
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
  </div>
</div>

उपरोक्त उदाहरण हमारे पूर्वनिर्धारित ग्रिड वर्गों का उपयोग करके छोटे, मध्यम, बड़े और अतिरिक्त बड़े उपकरणों पर तीन समान-चौड़ाई वाले कॉलम बनाता है। वे कॉलम पेरेंट के साथ पेज में केंद्रित होते हैं .container।

इसे तोड़कर, यहां बताया गया है कि यह कैसे काम करता है:

कंटेनर आपकी साइट की सामग्री को केंद्र में रखने और क्षैतिज रूप से पैड करने का एक साधन प्रदान करते हैं। .containerप्रतिक्रियाशील पिक्सेल चौड़ाई .container-fluidके लिए या width: 100%सभी व्यूपोर्ट और डिवाइस आकारों के लिए उपयोग करें ।
पंक्तियाँ स्तंभों के लिए आवरण हैं। प्रत्येक स्तंभ में paddingउनके बीच की जगह को नियंत्रित करने के लिए क्षैतिज (गटर कहा जाता है) होता है। इसके paddingबाद नकारात्मक मार्जिन वाली पंक्तियों पर इसका प्रतिकार किया जाता है। इस तरह, आपके कॉलम की सभी सामग्री को बाईं ओर नीचे की ओर दृष्टिगत रूप से संरेखित किया जाता है।
ग्रिड लेआउट में, सामग्री को कॉलम के भीतर रखा जाना चाहिए और केवल कॉलम पंक्तियों के तत्काल बच्चे हो सकते हैं।
फ्लेक्सबॉक्स के लिए धन्यवाद, बिना किसी निर्दिष्ट के ग्रिड कॉलम widthस्वचालित रूप से समान चौड़ाई वाले कॉलम के रूप में लेआउट करेंगे। उदाहरण के लिए, .col-smवसीयत के चार उदाहरण छोटे ब्रेकपॉइंट और ऊपर से स्वचालित रूप से 25% चौड़े होंगे। अधिक उदाहरणों के लिए ऑटो-लेआउट कॉलम अनुभाग देखें ।
स्तंभ वर्ग संभावित 12 प्रति पंक्ति में से उन स्तंभों की संख्या को इंगित करते हैं जिनका आप उपयोग करना चाहते हैं। इसलिए, यदि आप तीन समान-चौड़ाई वाले कॉलम चाहते हैं, तो आप इसका उपयोग कर सकते हैं .col-4।
कॉलम widths प्रतिशत में सेट हैं, इसलिए वे हमेशा अपने मूल तत्व के सापेक्ष तरल और आकार के होते हैं।
paddingकॉलम में अलग-अलग कॉलम के बीच गटर बनाने के लिए क्षैतिज होते हैं, हालांकि, आप marginपंक्तियों paddingसे और कॉलम से .no-guttersको हटा सकते हैं .row।
ग्रिड को प्रतिक्रियाशील बनाने के लिए, पांच ग्रिड ब्रेकपॉइंट हैं, प्रत्येक उत्तरदायी ब्रेकपॉइंट के लिए एक : सभी ब्रेकपॉइंट (अतिरिक्त छोटे), छोटे, मध्यम, बड़े और अतिरिक्त बड़े।
ग्रिड ब्रेकप्वाइंट न्यूनतम चौड़ाई वाले मीडिया प्रश्नों पर आधारित होते हैं, जिसका अर्थ है कि वे उस एक ब्रेकपॉइंट और इसके ऊपर के सभी पर लागू होते हैं (उदाहरण के लिए, .col-sm-4छोटे, मध्यम, बड़े और अतिरिक्त बड़े उपकरणों पर लागू होते हैं, लेकिन पहले xsब्रेकपॉइंट पर नहीं)।
अधिक सिमेंटिक मार्कअप के लिए आप पूर्वनिर्धारित ग्रिड क्लासेस (जैसे .col-4) या सैस मिक्सिन का उपयोग कर सकते हैं।

फ्लेक्सबॉक्स के आसपास की सीमाओं और बगों से अवगत रहें , जैसे कुछ HTML तत्वों को फ्लेक्स कंटेनर के रूप में उपयोग करने में असमर्थता ।

ग्रिड विकल्प

जबकि बूटस्ट्रैप अधिकांश आकारों को परिभाषित करने के लिए ems या s का उपयोग करता है, s का उपयोग ग्रिड ब्रेकप्वाइंट और कंटेनर चौड़ाई के लिए किया जाता है। ऐसा इसलिए है क्योंकि व्यूपोर्ट की चौड़ाई पिक्सेल में है और फ़ॉन्ट आकार के साथ नहीं बदलती है ।rempx

देखें कि बूटस्ट्रैप ग्रिड सिस्टम के पहलू एक आसान तालिका के साथ कई उपकरणों पर कैसे काम करते हैं।

	अतिरिक्त छोटा <576px	छोटा 576px	मध्यम 768px	बड़ा 992px	अतिरिक्त बड़ा ≥1200px
अधिकतम कंटेनर चौड़ाई	कोई नहीं (ऑटो)	540px	720px	960px	1140पीएक्स
कक्षा उपसर्ग	`.col-`	`.col-sm-`	`.col-md-`	`.col-lg-`	`.col-xl-`
# कॉलम	12
नाले की चौड़ाई	30px (एक कॉलम के प्रत्येक तरफ 15px)
नेस्टेबल	हाँ
कॉलम ऑर्डरिंग	हाँ

ऑटो-लेआउट कॉलम

स्पष्ट क्रमांकित वर्ग जैसे .col-sm-6.

बराबर-चौड़ाई

उदाहरण के लिए, यहां दो ग्रिड लेआउट दिए गए हैं जो प्रत्येक डिवाइस और व्यूपोर्ट पर लागू होते हैं, xsसे xl. आपको आवश्यक प्रत्येक ब्रेकपॉइंट के लिए किसी भी संख्या में यूनिट-कम कक्षाएं जोड़ें और प्रत्येक कॉलम समान चौड़ाई का होगा।

2 में से 1

2 का 2

1 में से 3

2 में 3

3 में से 3

<div class="container">
  <div class="row">
    <div class="col">
      1 of 2
    </div>
    <div class="col">
      2 of 2
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col">
      2 of 3
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
</div>

समान-चौड़ाई वाले स्तंभों को कई पंक्तियों में तोड़ा जा सकता है, लेकिन एक सफारी फ्लेक्सबॉक्स बग था जो इसे स्पष्ट flex-basisया border. पुराने ब्राउज़र संस्करणों के लिए वर्कअराउंड हैं, लेकिन यदि आप अप-टू-डेट हैं तो वे आवश्यक नहीं होने चाहिए।

कॉलम

<div class="container">
  <div class="row">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="w-100"></div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

एक कॉलम चौड़ाई सेट करना

फ्लेक्सबॉक्स ग्रिड कॉलम के लिए ऑटो-लेआउट का मतलब यह भी है कि आप एक कॉलम की चौड़ाई निर्धारित कर सकते हैं और इसके चारों ओर सिबलिंग कॉलम स्वचालित रूप से आकार बदल सकते हैं। आप पूर्वनिर्धारित ग्रिड कक्षाओं (जैसा कि नीचे दिखाया गया है), ग्रिड मिक्सिन या इनलाइन चौड़ाई का उपयोग कर सकते हैं। ध्यान दें कि केंद्र कॉलम की चौड़ाई से कोई फर्क नहीं पड़ता अन्य कॉलम का आकार बदल जाएगा।

1 में से 3

3 में से 2 (व्यापक)

3 में से 3

1 में से 3

3 में से 2 (व्यापक)

3 में से 3

<div class="container">
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-6">
      2 of 3 (wider)
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-5">
      2 of 3 (wider)
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
</div>

चर चौड़ाई सामग्री

col-{breakpoint}-autoउनकी सामग्री की प्राकृतिक चौड़ाई के आधार पर स्तंभों को आकार देने के लिए कक्षाओं का उपयोग करें ।

1 में से 3

चर चौड़ाई सामग्री

3 में से 3

1 में से 3

चर चौड़ाई सामग्री

3 में से 3

<div class="container">
  <div class="row justify-content-md-center">
    <div class="col col-lg-2">
      1 of 3
    </div>
    <div class="col-md-auto">
      Variable width content
    </div>
    <div class="col col-lg-2">
      3 of 3
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-md-auto">
      Variable width content
    </div>
    <div class="col col-lg-2">
      3 of 3
    </div>
  </div>
</div>

समान-चौड़ाई वाली बहु-पंक्ति

समान-चौड़ाई वाले कॉलम बनाएं, जो कई पंक्तियों को फैलाते हैं .w-100, जहां आप चाहते हैं कि कॉलम एक नई लाइन में टूट जाएं। .w-100कुछ रिस्पॉन्सिव डिस्प्ले यूटिलिटीज के साथ मिलाकर ब्रेक्स को रिस्पॉन्सिव बनाएं ।

कर्नल

<div class="row">
  <div class="col">col</div>
  <div class="col">col</div>
  <div class="w-100"></div>
  <div class="col">col</div>
  <div class="col">col</div>
</div>

उत्तरदायी वर्ग

बूटस्ट्रैप के ग्रिड में जटिल उत्तरदायी लेआउट बनाने के लिए पूर्वनिर्धारित कक्षाओं के पांच स्तर शामिल हैं। अतिरिक्त छोटे, छोटे, मध्यम, बड़े, या अतिरिक्त बड़े उपकरणों पर अपने कॉलम के आकार को अनुकूलित करें, हालांकि आप फिट देखते हैं।

सभी ब्रेकप्वाइंट

ग्रिड के लिए जो छोटे उपकरणों से लेकर सबसे बड़े तक समान हैं, .colऔर .col-*कक्षाओं का उपयोग करें। जब आपको विशेष आकार के कॉलम की आवश्यकता हो तो एक क्रमांकित वर्ग निर्दिष्ट करें; अन्यथा, बेझिझक चिपके रहें .col।

कर्नल

कर्नल-8

कर्नल-4

<div class="row">
  <div class="col">col</div>
  <div class="col">col</div>
  <div class="col">col</div>
  <div class="col">col</div>
</div>
<div class="row">
  <div class="col-8">col-8</div>
  <div class="col-4">col-4</div>
</div>

क्षैतिज करने के लिए स्टैक्ड

कक्षाओं के एक सेट का उपयोग करके .col-sm-*, आप एक बुनियादी ग्रिड सिस्टम बना सकते हैं जो स्टैक से शुरू होता है और छोटे ब्रेकपॉइंट ( sm) पर क्षैतिज हो जाता है।

col-sm-8

col-sm-4

col-sm

<div class="row">
  <div class="col-sm-8">col-sm-8</div>
  <div class="col-sm-4">col-sm-4</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>

मिश्रण और मैच

क्या आप नहीं चाहते कि आपके कॉलम कुछ ग्रिड स्तरों में बस ढेर हो जाएं? आवश्यकतानुसार प्रत्येक स्तर के लिए विभिन्न वर्गों के संयोजन का उपयोग करें। यह सब कैसे काम करता है, इसके बेहतर विचार के लिए नीचे दिया गया उदाहरण देखें।

.col-12 .col-md-8

.col-6 .col-md-4

.col-6

<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
  <div class="col-12 col-md-8">.col-12 .col-md-8</div>
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>

<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>

<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
  <div class="col-6">.col-6</div>
  <div class="col-6">.col-6</div>
</div>

संरेखण

कॉलम को लंबवत और क्षैतिज रूप से संरेखित करने के लिए फ्लेक्सबॉक्स संरेखण उपयोगिताओं का उपयोग करें।

ऊर्ध्वाधर संरेखण

तीन स्तंभों में से एक

<div class="container">
  <div class="row align-items-start">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
  <div class="row align-items-center">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
  <div class="row align-items-end">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
</div>

तीन स्तंभों में से एक

<div class="container">
  <div class="row">
    <div class="col align-self-start">
      One of three columns
    </div>
    <div class="col align-self-center">
      One of three columns
    </div>
    <div class="col align-self-end">
      One of three columns
    </div>
  </div>
</div>

क्षैतिज संरेखण

दो स्तंभों में से एक

<div class="container">
  <div class="row justify-content-start">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-center">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-end">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-around">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-between">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
</div>

कोई गटर नहीं

हमारे पूर्वनिर्धारित ग्रिड वर्गों में स्तंभों के बीच के गटर को .no-gutters. यह सभी तत्काल चिल्ड्रन कॉलम से नकारात्मक margins .rowऔर क्षैतिज को हटा देता है।padding

इन शैलियों को बनाने के लिए स्रोत कोड यहां दिया गया है। ध्यान दें कि कॉलम ओवरराइड केवल पहले चिल्ड्रन कॉलम तक सीमित हैं और विशेषता चयनकर्ता के माध्यम से लक्षित हैं । हालांकि यह एक अधिक विशिष्ट चयनकर्ता उत्पन्न करता है, फिर भी कॉलम पैडिंग को स्पेसिंग यूटिलिटीज के साथ और भी अनुकूलित किया जा सकता है ।

एज-टू-एज डिज़ाइन की आवश्यकता है? माता-पिता को छोड़ें .containerया .container-fluid.

.no-gutters {
  margin-right: 0;
  margin-left: 0;

  > .col,
  > [class*="col-"] {
    padding-right: 0;
    padding-left: 0;
  }
}

व्यवहार में, यह कैसा दिखता है। ध्यान दें कि आप अन्य सभी पूर्वनिर्धारित ग्रिड वर्गों (स्तंभ की चौड़ाई, प्रतिक्रियाशील स्तरों, पुन: क्रम, और अधिक सहित) के साथ इसका उपयोग करना जारी रख सकते हैं।

.col-12 .col-sm-6 .col-md-8

.col-6 .col-md-4

<div class="row no-gutters">
  <div class="col-12 col-sm-6 col-md-8">.col-12 .col-sm-6 .col-md-8</div>
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>

कॉलम रैपिंग

यदि एक पंक्ति में 12 से अधिक कॉलम रखे जाते हैं, तो अतिरिक्त कॉलम का प्रत्येक समूह, एक इकाई के रूप में, एक नई लाइन पर लपेट जाएगा।

.col-9

.col-4
9 + 4 = 13> 12 के बाद से, यह 4-स्तंभ-चौड़ा डिव एक नई लाइन पर एक सन्निहित इकाई के रूप में लिपट जाता है।

.col-6
बाद के कॉलम नई लाइन के साथ जारी हैं।

<div class="row">
  <div class="col-9">.col-9</div>
  <div class="col-4">.col-4<br>Since 9 + 4 = 13 &gt; 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
  <div class="col-6">.col-6<br>Subsequent columns continue along the new line.</div>
</div>

कॉलम ब्रेक

फ्लेक्सबॉक्स में कॉलम को एक नई लाइन में तोड़ने के लिए एक छोटी सी हैक की आवश्यकता होती है: width: 100%जहां भी आप अपने कॉलम को एक नई लाइन में लपेटना चाहते हैं, वहां एक तत्व जोड़ें। आम तौर पर यह कई .rows के साथ पूरा किया जाता है, लेकिन प्रत्येक कार्यान्वयन विधि इसके लिए जिम्मेदार नहीं हो सकती है।

.col-6 .col-sm-3

<div class="row">
  <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
  <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>

  <!-- Force next columns to break to new line -->
  <div class="w-100"></div>

  <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
  <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
</div>

आप इस ब्रेक को हमारी प्रतिक्रियाशील प्रदर्शन उपयोगिताओं के साथ विशिष्ट ब्रेकप्वाइंट पर भी लागू कर सकते हैं ।

.col-6 .col-sm-4

<div class="row">
  <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
  <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>

  <!-- Force next columns to break to new line at md breakpoint and up -->
  <div class="w-100 d-none d-md-block"></div>

  <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
  <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
</div>

पुन: क्रम

आदेश कक्षाएं

अपनी सामग्री के दृश्य क्रम.order- को नियंत्रित करने के लिए कक्षाओं का उपयोग करें । ये कक्षाएं उत्तरदायी हैं, इसलिए आप ब्रेकपॉइंट (जैसे, ) द्वारा सेट कर सकते हैं। सभी पांच ग्रिड स्तरों के माध्यम से समर्थन शामिल है ।order.order-1.order-md-2112

पहले, लेकिन अनियंत्रित

दूसरा, लेकिन आखिरी

तीसरा, लेकिन पहले

<div class="container">
  <div class="row">
    <div class="col">
      First, but unordered
    </div>
    <div class="col order-12">
      Second, but last
    </div>
    <div class="col order-1">
      Third, but first
    </div>
  </div>
</div>

ऐसे प्रतिक्रियाशील .order-firstऔर .order-lastवर्ग भी होते हैं जो क्रमशः और ( ) orderको लागू करके किसी तत्व को बदलते हैं। इन वर्गों को आवश्यकतानुसार क्रमांकित वर्गों के साथ भी मिलाया जा सकता है।order: -1order: 13order: $columns + 1.order-*

पहला, लेकिन आखिरी

दूसरा, लेकिन अनियंत्रित

तीसरा, लेकिन पहले

<div class="container">
  <div class="row">
    <div class="col order-last">
      First, but last
    </div>
    <div class="col">
      Second, but unordered
    </div>
    <div class="col order-first">
      Third, but first
    </div>
  </div>
</div>

ऑफसेटिंग कॉलम

आप ग्रिड कॉलम को दो तरह से ऑफसेट कर सकते हैं: हमारी प्रतिक्रियाशील .offset-ग्रिड क्लासेस और हमारी मार्जिन यूटिलिटीज । ग्रिड वर्गों का आकार कॉलम से मेल खाने के लिए होता है जबकि मार्जिन त्वरित लेआउट के लिए अधिक उपयोगी होते हैं जहां ऑफ़सेट की चौड़ाई परिवर्तनशील होती है।

ऑफसेट कक्षाएं

.offset-md-*कक्षाओं का उपयोग करके कॉलम को दाईं ओर ले जाएं । ये वर्ग कॉलम के बाएं मार्जिन को कॉलम से बढ़ाते *हैं। उदाहरण के लिए, चार स्तंभों पर .offset-md-4चलता है।.col-md-4

.col-md-4

.col-md-4 .offset-md-4

.col-md-3 .offset-md-3

.col-md-6 .offset-md-3

<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>
</div>
<div class="row">
  <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
  <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
</div>
<div class="row">
  <div class="col-md-6 offset-md-3">.col-md-6 .offset-md-3</div>
</div>

प्रतिक्रियाशील विराम बिंदुओं पर स्तंभ समाशोधन के अलावा, आपको ऑफ़सेट रीसेट करने की आवश्यकता हो सकती है। इसे ग्रिड उदाहरण में क्रिया में देखें ।

.col-sm-5 .col-md-6

.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0

.col-sm-6 .col-md-5 .col-lg-6

.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0

<div class="row">
  <div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
  <div class="col-sm-5 offset-sm-2 col-md-6 offset-md-0">.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0</div>
</div>

<div class="row">
  <div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div>
  <div class="col-sm-6 col-md-5 offset-md-2 col-lg-6 offset-lg-0">.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0</div>
</div>

मार्जिन उपयोगिताओं

v4 में फ्लेक्सबॉक्स में जाने के साथ, आप मार्जिन उपयोगिताओं का उपयोग कर सकते हैं जैसे .mr-autoकि सिबलिंग कॉलम को एक दूसरे से दूर करने के लिए मजबूर करना।

.col-md-4

.col-md-4 .ml-auto

.col-md-3 .ml-md-auto

.col-auto .mr-auto

.col-auto

<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4 ml-auto">.col-md-4 .ml-auto</div>
</div>
<div class="row">
  <div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
  <div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
</div>
<div class="row">
  <div class="col-auto mr-auto">.col-auto .mr-auto</div>
  <div class="col-auto">.col-auto</div>
</div>

घोंसला करने की क्रिया

अपनी सामग्री को डिफ़ॉल्ट ग्रिड के साथ नेस्ट करने के लिए, मौजूदा कॉलम में एक नया .rowऔर कॉलम का सेट जोड़ें । नेस्टेड पंक्तियों में कॉलम का एक सेट शामिल होना चाहिए जो 12 या उससे कम तक जोड़ता है (यह आवश्यक नहीं है कि आप सभी 12 उपलब्ध कॉलम का उपयोग करें)।.col-sm-*.col-sm-*

स्तर 1: .col-sm-9

स्तर 2: .col-8 .col-sm-6

स्तर 2: .col-4 .col-sm-6

<div class="row">
  <div class="col-sm-9">
    Level 1: .col-sm-9
    <div class="row">
      <div class="col-8 col-sm-6">
        Level 2: .col-8 .col-sm-6
      </div>
      <div class="col-4 col-sm-6">
        Level 2: .col-4 .col-sm-6
      </div>
    </div>
  </div>
</div>

सास मिश्रण

बूटस्ट्रैप के स्रोत Sass फ़ाइलों का उपयोग करते समय, आपके पास कस्टम, सिमेंटिक और उत्तरदायी पृष्ठ लेआउट बनाने के लिए Sass चर और मिक्सिन का उपयोग करने का विकल्प होता है। हमारी पूर्वनिर्धारित ग्रिड कक्षाएं तेजी से प्रतिक्रियाशील लेआउट के लिए उपयोग के लिए तैयार कक्षाओं का एक पूरा सूट प्रदान करने के लिए इन्हीं चर और मिश्रणों का उपयोग करती हैं।

चर

चर और मानचित्र स्तंभों की संख्या, गटर की चौड़ाई और मीडिया क्वेरी बिंदु निर्धारित करते हैं जिस पर फ़्लोटिंग कॉलम शुरू करना है। हम इनका उपयोग ऊपर प्रलेखित पूर्वनिर्धारित ग्रिड कक्षाओं के साथ-साथ नीचे सूचीबद्ध कस्टम मिश्रणों के लिए भी करते हैं।

$grid-columns:      12;
$grid-gutter-width: 30px;

$grid-breakpoints: (
  // Extra small screen / phone
  xs: 0,
  // Small screen / phone
  sm: 576px,
  // Medium screen / tablet
  md: 768px,
  // Large screen / desktop
  lg: 992px,
  // Extra large screen / wide desktop
  xl: 1200px
);

$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px
);

मिक्सिन्स

अलग-अलग ग्रिड कॉलम के लिए सिमेंटिक सीएसएस उत्पन्न करने के लिए मिक्सिन का उपयोग ग्रिड चर के साथ संयोजन में किया जाता है।

// Creates a wrapper for a series of columns
@include make-row();

// Make the element grid-ready (applying everything but the width)
@include make-col-ready();
@include make-col($size, $columns: $grid-columns);

// Get fancy by offsetting, or changing the sort order
@include make-col-offset($size, $columns: $grid-columns);

उदाहरण उपयोग

आप चरों को अपने स्वयं के कस्टम मानों में संशोधित कर सकते हैं, या केवल उनके डिफ़ॉल्ट मानों के साथ मिश्रित का उपयोग कर सकते हैं। यहां एक दो-स्तंभ लेआउट बनाने के लिए डिफ़ॉल्ट सेटिंग्स का उपयोग करने का एक उदाहरण दिया गया है, जिसके बीच का अंतर है।

.example-container {
  width: 800px;
  @include make-container();
}

.example-row {
  @include make-row();
}

.example-content-main {
  @include make-col-ready();

  @include media-breakpoint-up(sm) {
    @include make-col(6);
  }
  @include media-breakpoint-up(lg) {
    @include make-col(8);
  }
}

.example-content-secondary {
  @include make-col-ready();

  @include media-breakpoint-up(sm) {
    @include make-col(6);
  }
  @include media-breakpoint-up(lg) {
    @include make-col(4);
  }
}

मुख्य सामग्री

माध्यमिक सामग्री

<div class="example-container">
  <div class="example-row">
    <div class="example-content-main">Main content</div>
    <div class="example-content-secondary">Secondary content</div>
  </div>
</div>

ग्रिड को अनुकूलित करना

हमारे अंतर्निर्मित ग्रिड Sass चर और मानचित्रों का उपयोग करके, पूर्वनिर्धारित ग्रिड कक्षाओं को पूरी तरह से अनुकूलित करना संभव है। स्तरों की संख्या, मीडिया क्वेरी आयाम और कंटेनर की चौड़ाई बदलें—फिर पुन: संकलित करें।

कॉलम और गटर

ग्रिड कॉलम की संख्या Sass चर के माध्यम से संशोधित की जा सकती है। कॉलम गटर के लिए चौड़ाई निर्धारित $grid-columnsकरते समय प्रत्येक व्यक्तिगत कॉलम की चौड़ाई (प्रतिशत में) उत्पन्न करने के लिए उपयोग किया जाता है ।$grid-gutter-width

$grid-columns: 12 !default;
$grid-gutter-width: 30px !default;

ग्रिड टियर

स्तंभों से आगे बढ़ते हुए, आप ग्रिड स्तरों की संख्या को भी अनुकूलित कर सकते हैं। यदि आप केवल चार ग्रिड स्तर चाहते हैं, तो आप $grid-breakpointsऔर $container-max-widthsकुछ इस तरह से अपडेट करेंगे:

$grid-breakpoints: (
  xs: 0,
  sm: 480px,
  md: 768px,
  lg: 1024px
);

$container-max-widths: (
  sm: 420px,
  md: 720px,
  lg: 960px
);

Sass चर या मानचित्र में कोई भी परिवर्तन करते समय, आपको अपने परिवर्तनों को सहेजना और पुन: संकलित करना होगा। ऐसा करने से कॉलम चौड़ाई, ऑफ़सेट और ऑर्डरिंग के लिए पूर्वनिर्धारित ग्रिड कक्षाओं का एक नया सेट आउटपुट होगा। कस्टम ब्रेकप्वाइंट का उपयोग करने के लिए उत्तरदायी दृश्यता उपयोगिताओं को भी अपडेट किया जाएगा। pxग्रिड मानों को (नहीं rem, em, या %) में सेट करना सुनिश्चित करें ।