Source

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

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

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

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

फ्लेक्सबॉक्स के लिए नया या अपरिचित? पृष्ठभूमि, शब्दावली, दिशानिर्देश और कोड स्निपेट के लिए इस 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>

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

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

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

कर्नल

<div class="container">
  <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>
</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>

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

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

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

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

कर्नल

कर्नल-8

कर्नल-4

<div class="container">
  <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>
</div>

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

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

col-sm-8

col-sm-4

col-sm

<div class="container">
  <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>
</div>

मिश्रण और मैच

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

.col-md-8

.col-6 .col-md-4

.col-6

<div class="container">
  <!-- Stack the columns on mobile by making one full-width and the other half-width -->
  <div class="row">
    <div class="col-md-8">.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>

गटर

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

यहां बूटस्ट्रैप ग्रिड को बड़े ( lg) ब्रेकप्वाइंट और ऊपर अनुकूलित करने का एक उदाहरण दिया गया है। हमने .colपैडिंग को के साथ बढ़ाया है, इसके साथ माता-पिता पर .px-lg-5विरोध किया है और फिर रैपर को के साथ समायोजित किया है ।.mx-lg-n5.row.container.px-lg-5

कस्टम कॉलम पैडिंग

<div class="container px-lg-5">
  <div class="row mx-lg-n5">
    <div class="col py-3 px-lg-5 border bg-light">Custom column padding</div>
    <div class="col py-3 px-lg-5 border bg-light">Custom column padding</div>
  </div>
</div>

पंक्ति स्तंभ

आपकी सामग्री और लेआउट को सर्वोत्तम रूप से प्रस्तुत करने वाले स्तंभों की संख्या शीघ्रता से निर्धारित करने के लिए प्रतिक्रियाशील .row-cols-*कक्षाओं का उपयोग करें। जबकि सामान्य .col-*वर्ग अलग-अलग कॉलम (जैसे, .col-md-4) पर लागू होते हैं, रो कॉलम क्लास को पैरेंट पर .rowशॉर्टकट के रूप में सेट किया जाता है।

बुनियादी ग्रिड लेआउट बनाने के लिए या अपने कार्ड लेआउट को नियंत्रित करने के लिए इन पंक्ति कॉलम कक्षाओं का उपयोग करें।

कॉलम

<div class="container">
  <div class="row row-cols-2">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

कॉलम

<div class="container">
  <div class="row row-cols-3">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

कॉलम

<div class="container">
  <div class="row row-cols-4">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

कॉलम

<div class="container">
  <div class="row row-cols-4">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col-6">Column</div>
    <div class="col">Column</div>
  </div>
</div>

कॉलम

<div class="container">
  <div class="row row-cols-1 row-cols-sm-2 row-cols-md-4">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

आप साथ में Sass mixin का भी उपयोग कर सकते हैं row-cols():

.element {
  // Three columns to start
  @include row-cols(3);

  // Five columns from medium breakpoint up
  @include media-breakpoint-up(md) {
    @include row-cols(5);
  }
}

संरेखण

कॉलम को लंबवत और क्षैतिज रूप से संरेखित करने के लिए फ्लेक्सबॉक्स संरेखण उपयोगिताओं का उपयोग करें। जब फ्लेक्स कंटेनर में नीचे दिखाया गया है तो इंटरनेट एक्सप्लोरर 10-11 फ्लेक्स आइटम के लंबवत संरेखण का समर्थन नहीं करता है । min-height अधिक जानकारी के लिए फ्लेक्सबग्स #3 देखें।

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

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

<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-sm-6 .col-md-8

.col-6 .col-md-4

<div class="row no-gutters">
  <div class="col-sm-6 col-md-8">.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="container">
  <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>
</div>

कॉलम ब्रेक

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

.col-6 .col-sm-3

<div class="container">
  <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>
</div>

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

.col-6 .col-sm-4

<div class="container">
  <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>
</div>

पुन: क्रम

आदेश कक्षाएं

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

पहले DOM में, कोई आदेश लागू नहीं हुआ

DOM में दूसरा, बड़े ऑर्डर के साथ

डीओएम में तीसरा, 1 . के आदेश के साथ

<div class="container">
  <div class="row">
    <div class="col">
      First in DOM, no order applied
    </div>
    <div class="col order-12">
      Second in DOM, with a larger order
    </div>
    <div class="col order-1">
      Third in DOM, with an order of 1
    </div>
  </div>
</div>

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

डीओएम में सबसे पहले, अंतिम आदेश दिया गया

डोम में दूसरा, अनियंत्रित

DOM में तीसरा, पहले ऑर्डर किया गया

<div class="container">
  <div class="row">
    <div class="col order-last">
      First in DOM, ordered last
    </div>
    <div class="col">
      Second in DOM, unordered
    </div>
    <div class="col order-first">
      Third in DOM, ordered 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="container">
  <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>
</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="container">
  <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>
</div>

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

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

.col-md-4

.col-md-4 .ml-auto

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

.col-ऑटो .mr-auto

.col-auto

<div class="container">
  <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>
</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="container">
  <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>
</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, या %) में सेट करना सुनिश्चित करें ।