Source

ग्रिड सिस्टम के बारे में बतावल गइल बा

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

कइसे काम करेला

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

फ्लेक्सबॉक्स में नया बानी कि अपरिचित बानी? बैकग्राउंड, शब्दावली, गाइडलाइन, आ कोड स्निपेट खातिर ई CSS Tricks flexbox गाइड पढ़ीं .

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

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

फ्लेक्सबॉक्स के आसपास के सीमा आ बग के बारे में जागरूक रहीं , जइसे कि कुछ एचटीएमएल तत्वन के फ्लेक्स कंटेनर के रूप में इस्तेमाल करे में असमर्थता .

ग्रिड के विकल्प बा

जबकि बूटस्ट्रैप ज्यादातर साइज सभ के परिभाषित करे खातिर ems या s के इस्तेमाल करे ला, s के इस्तेमाल ग्रिड ब्रेकपॉइंट आ कंटेनर चौड़ाई खातिर कइल जाला। एकर कारण बा कि व्यूपोर्ट के चौड़ाई पिक्सेल में होला आ फॉन्ट साइज ��े साथे ना बदलेला .rempx

देखल जाव कि बूटस्ट्रैप ग्रिड सिस्टम के पहलू कइसे एगो सुलभ टेबल के साथ कई गो डिवाइस सभ पर काम करे लें।

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

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

बिना कवनो स्पष्ट नंबर वाला क्लास के आसान कॉलम साइजिंग खातिर ब्रेकपॉइंट-विशिष्ट कॉलम क्लास के उपयोग करीं जइसे कि .col-sm-6.

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

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

2 में से 1 के बा

2 के 2 के बा

3 में से 1 के बा

3 में से 2 के बा

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>

एक कॉलम के चौड़ाई सेट कइल जा रहल बा

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

3 में से 1 के बा

3 में से 2 (चौड़ा) के बा।

3 में से 3 के बा

3 में से 1 के बा

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कॉलम सभ के सामग्री के प्राकृतिक चौड़ाई के आधार पर आकार देवे खातिर क्लास सभ के इस्तेमाल करीं।

3 में से 1 के बा

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

3 में से 3 के बा

3 में से 1 के बा

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

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।

कोल-एसएम-8 के बा

कोल-एसएम-4 के बा

कोल-एसएम के बा

<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>

मिक्स आ मैच करीं

नइखीं चाहत कि राउर कॉलम बस कुछ ग्रिड टीयर में ढेर होखे? जरूरत के हिसाब से हर टीयर खातिर अलग-अलग क्लास के संयोजन के इस्तेमाल करीं। ई सब कइसे काम करेला एकर बेहतर विचार खातिर नीचे दिहल उदाहरण देखीं।

.कोल-एमडी-8 के बा

.कोल-6 .कोल-एमडी-4 के बा

.कोल-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;
  }
}

व्यवहार में देखल जाव त ई कइसे लउकत बा. ध्यान दीं कि आप एकर इस्तेमाल बाकी सभ पहिले से परिभाषित ग्रिड क्लास सभ के साथ जारी रख सकत बानी (जवना में कॉलम के चौड़ाई, रिस्पांसिव टीयर, रिऑर्डर आ अउरी बहुत कुछ भी सामिल बा)।

.कोल-एसएम-6 .कोल-एमडी-8 के बा

.कोल-6 .कोल-एमडी-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 से ढेर कॉलम सभ के रखल जाय तब अतिरिक्त कॉलम सभ के हर समूह, एक इकाई के रूप में, एगो नया लाइन पर लपेट जाई।

.कोल-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 के साथ पूरा होला, बाकी हर कार्यान्वयन तरीका एकर लेखाजोखा ना दे सके ला।

.कोल-6 .कोल-एसएम-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>

रउआ हमनी के रिस्पांसिव डिस्प्ले यूटिलिटीज के साथ विशिष्ट ब्रेकपॉइंट पर भी एह ब्रेक के लागू कर सकेनी .

.कोल-6 .कोल-एसएम-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

पहिले डीओएम में कवनो आदेश लागू ना भइल

डीओएम में दूसरा, बड़ ऑर्डर के संगे

डीओएम में तीसरा स्थान पर, 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बदले लें । एह क्लास सभ के जरूरत के हिसाब से नंबर दिहल क्लास सभ के साथ भी इंटरमिक्स कइल जा सके ला ।orderorder: -1order: 13order: $columns + 1.order-*

डीओएम में पहिला, आखिरी मंगावल गइल

डीओएम में दूसरा स्थान पर, अनऑर्डर

डीओएम में तीसरा, पहिले मंगावल गइल

<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

.कोल-एमडी-4 के बा

.कोल-एमडी-4 .ऑफसेट-एमडी-4 के बा

.कोल-एमडी-3 .ऑफसेट-एमडी-3 के बा

.कोल-एमडी-6 .ऑफसेट-एमडी-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>

रिस्पांसिव ब्रेकपॉइंट पर कॉलम क्लियरिंग के अलावा, रउआँ के ऑफसेट सभ के रीसेट करे के जरूरत पड़ सके ला। ग्रिड उदाहरण में एकरा के एक्शन में देखल जाव .

.कोल-एसएम-5 .कोल-एमडी-6 के बा

.कोल-एसएम-5 .ऑफसेट-एसएम-2 .कोल-एमडी-6 .ऑफसेट-एमडी-0 के बा

.कोल-एसएम-6 .कोल-एमडी-5 .कोल-एलजी-6 के बा

.कोल-एसएम-6 .कोल-एमडी-5 .ऑफसेट-एमडी-2 .कोल-एलजी-6 .ऑफसेट-एलजी-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 में flexbox पर जाए के साथ, आप मार्जिन उपयोगिता के इस्तेमाल कर सकत बानी जइसे .mr-autoकि भाई-बहिन के कॉलम के एक दूसरा से दूर करे खातिर मजबूर कइल।

.कोल-एमडी-4 के बा

.col-md-4 .ml-ऑटो के बा

.col-md-3 .ml-md-ऑटो के बा

.कोल-ऑटो .एमआर-ऑटो के बा

.कोल-ऑटो के बा

<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 चर आ नक्शा के इस्तेमाल से, पहिले से परिभाषित ग्रिड क्लास सभ के पूरा तरीका से अनुकूलित कइल संभव बा। टीयर सभ के संख्या, मीडिया क्वेरी आयाम, आ कंटेनर के चौड़ाई बदलीं-फिर फिर से संकलित करीं।

स्तंभ आ नाली के बा

ग्रिड कॉलम के संख्या के सास चर के माध्यम से संशोधित कइल जा सकेला। $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, या ) में सेट कइल सुनिश्चित करीं %।