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

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

किवें कम्म करदा है

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

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

फ्लेक्सबॉक्स दे आसपास दी सीमाएं ते बगें दे बारे च जागरूक रौह्ओ , जिऱयां किश एचटीएमएल तत्वें गी फ्लेक्स कंटेनर दे रूप च बरतने च असमर्थता .

ग्रिड विकल्प

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

दिक्खो किस चाल्ली बूटस्ट्रैप ग्रिड सिस्टम दे पहलू इक सुलभ तालिका कन्नै मते सारे डिवाइसें च कम्म करदे न।

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

ऑटो-लेआउट स्तंभ

बिना कुसै स्पश्ट नंबर आह् ले वर्ग दे आसान स्तंभ आकार देने आस्तै ब्रेकपॉइंट-विशिष्ट स्तंभ वर्गें दा उपयोग करो जि’यां .col-sm-6.

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

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

1 दा 2

२ दा २

1 दा 3

2 दा 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

2 दा 3 (चौड़ा)

३ दा ३

1 दा 3

2 दा 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

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

३ दा ३

1 दा 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>

गटर

गटरें गी ब्रेकपॉइंट-विशिष्ट पैडिंग ते नेगेटिव मार्जिन यूटिलिटी क्लासें कन्नै प्रतिक्रियाशील रूप कन्नै समायोजित कीता जाई सकदा ऐ। दित्ती गेदी पंक्ति च गटर बदलने लेई, एस पर इक नकारात्मक मार्जिन उपयोगिता .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>

तुस इसदे कन्नै दित्ते गेदे सस मिक्सिन दा बी इस्तेमाल करी सकदे ओ, 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ऐ जिसी हेठ दिक्खेआ गेआ ऐ। होर मती जानकारी आस्तै दिक्खो Flexbugs #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. इस कन्नै सारे तत्काल बच्चें दे स्तंभें थमां नकारात्मक marginएस .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%जित्थें बी तुस अपने स्तंभें गी इक नमीं लाइन च लपेटना चांह् दे ओ। आमतौर उप्पर एह् मते सारे .rowएस कन्नै पूरा कीता जंदा ऐ , पर हर इक लागू करने दी विधि इसदा लेखा-जोखा नेईं देई सकदी ऐ ।

.कोल-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वर्ग बी होंदे न जेह् ड़े क्रमशः ते ( ) orderगी लागू करियै इक तत्व गी बदलदे न । इनें वर्गें गी जरूरत मताबक नंबर आह् ली क्लासें कन्नै बी इंटरमिक्स कीता जाई सकदा ऐ।order: -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 ऐ

.कोल-एमडी-4 .एमएल-ऑटो

.कोल-एमडी-3 .एमएल-एमडी-ऑटो

.कोल-ऑटो .एमआर-ऑटो

.कोल-ऑटो दा

<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: .कोल-एसएम-9 ऐ

स्तर 2: .कोल-8 .कोल-एसएम-6 ऐ

स्तर 2: .कोल-4 .कोल-एसएम-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 {
  @include make-container();
  // Make sure to define this width after the mixin to override
  // `width: 100%` generated by `make-container()`
  width: 800px;
}

.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, जां ) च सेट करना सुनिश्चत करो %।