in English

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

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

इस पेज पर

मसाल

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

फ्लेक्सबॉक्स च नमें या अनजान? पृष्ठभूमि, शब्दावली, दिशा-निर्देशें, ते कोड स्निपेटें आस्तै इस CSS Tricks flexbox गाइड गी पढ़ो .

थ'म्म

<div class="container">
  <div class="row">
    <div class="col">
      Column
    </div>
    <div class="col">
      Column
    </div>
    <div class="col">
      Column
    </div>
  </div>
</div>

उपर्युक्त उदाहरन साढ़े पूर्व-निर्धारित ग्रिड वर्गें दा इस्तेमाल करदे होई सारे डिवाइस ते व��यूपोर्टें च त्रै बराबर-चौड़ाई आह् ले स्तंभ बनांदा ऐ। उनें स्तंभें गी माता - पिता कन्नै पृष्ठ च केंद्रत कीता गेदा ऐ .container.

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

इसगी तोड़दे होई, इत्थें दिक्खो ग्रिड सिस्टम किस चाल्ली इकट्ठा होंदा ऐ:

साढ़ी ग्रिड छह प्रतिक्रियाशील ब्रेकपॉइंटें गी समर्थन करदी ऐ . ब्रेकपॉइंट मीडिया क्वेरी उप्पर आधारत ऐ min-width, मतलब एह् उस ब्रेकपॉइंट ते उसदे उप्पर दित्ते गेदे सारें गी प्रभावित करदे न (जियां , , , , ते ) .col-sm-4पर लागू होंदा ऐ । इसदा मतलब ऐ जे तुस हर ब्रेकपॉइंट कन्नै कंटेनर ते स्तंभ आकार ते व्यवहार गी नियंत्रत करी सकदे ओ.smmdlgxlxxl
कंटेनर केंद्र ते क्षैतिज रूप कन्नै अपनी सामग्री पैड। .containerइक प्रतिक्रियाशील पिक्सेल चौड़ाई आस्तै, सारे दृष्टिकोण ते उपकरणें दे पार .container-fluidआस्तै , जां इक प्रतिक्रियाशील कंटेनर (जियां, ) तरल ते पिक्सेल चौड़ाई दे संयोजन आस्तै इस्तेमाल करो.width: 100%.container-md
पंक्तियां स्तंभें लेई रैपर न। हर इक स्तंभ च paddingउंदे बश्कार जगह गी नियंत्रित करने आस्तै क्षैतिज (जिसी गटर आखेआ जंदा ऐ) होंदा ऐ । इसदे paddingबाद इसदा मुकाबला नकारात्मक हाशिए कन्नै पंक्तियें पर कीता जंदा ऐ तां जे एह् सुनिश्चत कीता जाई सकै जे तुंदे स्तंभें च समग्गरी बक्खी दा बक्खी दिक्खने आह् ली बक्खी संरेखित ऐ। पंक्तियां संशोधक वर्गें गी इक समान रूप कन्नै लागू करने आस्तै संशोधक वर्गें गी बी समर्थन करदे न ते तुंदी सामग्री दी अंतराल बदलने आस्तै गटर वर्गें गी बी समर्थन करदे न.
स्तंभ अविश्वसनीय रूप कन्नै लचीले न। हर पंक्ति च 12 टेम्पलेट स्तंभ उपलब्ध न, जेह् ड़े तुसेंगी तत्वें दे बक्ख-बक्ख संयोजन बनाने दी इजाजत दिंदे न जेह् ड़े कुसै बी संख्या च स्तंभें च फैले दे न। स्तंभ वर्गें गी स्पैन करने आस्तै टेम्पलेट स्तंभें दी गिनतरी गी दर्शांदा ऐ (जियां, col-4स्पैन चार)। widths प्रतिशतें च सेट कीते गेदे न तां जे तुंदे कोल हमेशा इक गै सापेक्ष आकार होंदा ऐ।
गटर बी रिस्पांसिव ते कस्टमाइज करने योग्य होंदे न। गटर क्लासें गी सारे ब्रेकपॉइंटें च उपलब्ध ऐ , जिसदे सारे आकार साढ़े मार्जिन ते पैडिंग स्पेसिंग दे समान न . .gx-*क्लासें कन्नै क्षैतिज गटरें गी, , कन्नै खड़ी गटरें गी बदलो .gy-*, जां क्लासें कन्नै सारे गटरें गी बदलो .g-*। .g-0गटर हटाने लेई बी उपलब्ध ऐ।
सस्स चर, नक्शे, ते मिक्सिन ग्रिड गी पावर दिंदे न। जेकर तुस बूटस्ट्रैप च पूर्व-निर्धारित ग्रिड वर्गें दा इस्तेमाल नेईं करना चांह् दे ओ तां तुस साढ़े ग्रिड दे स्रोत Sass दा इस्तेमाल करियै होर शब्दार्थ मार्कअप कन्नै अपना बनाने लेई करी सकदे ओ. तुंदे आस्तै होर बी मती लचीलापन आस्तै इनें Sass चर दा उपभोग करने आस्तै अस किश CSS कस्टम गुण बी शामल करदे आं।

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

ग्रिड विकल्प

बूटस्ट्रैप दा ग्रिड सिस्टम सारे छें डिफाल्ट ब्रेकपॉइंटें च अनुकूल होई सकदा ऐ, ते कुसै बी ब्रेकपॉइंट गी तुस अनुकूलित करदे ओ. छह डिफ़ॉल्ट ग्रिड टियर इस चाल्ली न:

अतिरिक्त छोटा (xs) ऐ।
छोटे (एस एम) ऐ।
मध्यम (एमडी) ऐ।
बड़े (एलजी) ऐ।
अतिरिक्त बड़ी (xl)
अतिरिक्त अतिरिक्त बड़ा (xxl)

जि’यां उप्पर दित्ते गेदे न, इनें ब्रेकपॉइंटें च हर इक दा अपना कंटेनर, अद्वितीय वर्ग उपसर्ग, ते संशोधक होंदे न। इनें ब्रेकपॉइंटें दे पार ग्रिड किस चाल्ली बदलदा ऐ: एह् दिक्खेआ गेआ ऐ:

	xs <576px ऐ	एस एम ≥576px ऐ	एमडी ≥768px ऐ	एलजी ≥992px ऐ	xl ≥1200px ऐ	xxl ≥1400px ऐ
कंटेनर दा`max-width`	कोई (ऑटो)	540पीएक्स ऐ	720पीएक्स ऐ	960पीएक्स ऐ	1140पीएक्स ऐ	1320पीएक्स ऐ
वर्ग उपसर्ग	`.col-`	`.col-sm-`	`.col-md-`	`.col-lg-`	`.col-xl-`	`.col-xxl-`
# दा स्तंभ	12 दा
गटर चौड़ाई	1.5rem (बाएं ते दाएं पर .75rem)
कस्टम गटर	हां
घोंसलेदार	हां
कॉलम दा आर्डर देना	हां

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

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

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

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

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>

इक स्तंभ चौड़ाई सेट करना

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

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-cols-*तुंदी सामग्री ते लेआउट गी बेहतर तरीके कन्नै प्रस्तुत करने आह् ले स्तंभें दी गिनतरी गी जल्दी सेट करने आस्तै प्रतिक्रियाशील वर्गें दा इस्तेमाल करो. जित्थें सामान्य .col-*वर्गें गी व्यक्तिगत स्तंभें पर लागू कीता जंदा ऐ (जियां, ), पंक्ति स्तंभ वर्गें गी शार्टकट दे रूप .col-md-4च पैरेंट पर सेट कीता जंदा ऐ . .rowतुस कन्नै .row-cols-autoस्तंभें गी उंदी प्राकृतिक चौड़ाई देई सकदे ओ।

बुनियादी ग्रिड लेआउट गी जल्दी बनाने लेई जां अपने कार्ड लेआउट गी नियंत्रत करने लेई इनें पंक्ति स्तंभ वर्गें दा इस्तेमाल करो.

थ'म्म

<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-auto">
    <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);
  }
}

घोंसला बनाना

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

स्तर 1: .कोल-एसएम-3 ऐ

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

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

<div class="container">
  <div class="row">
    <div class="col-sm-3">
      Level 1: .col-sm-3
    </div>
    <div class="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: 1.5rem;

$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1400px
);

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

मिक्सिन

व्यक्तिगत ग्रिड स्तंभें लेई शब्दार्थ सीएसएस पैदा करने आस्तै मिक्सिन दा इस्तेमाल ग्रिड चरें कन्नै मिलियै कीता जंदा ऐ।

// 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();

// Without optional size values, the mixin will create equal columns (similar to using .col)
@include make-col();
@include make-col($size, $columns: $grid-columns);

// Offset with margins
@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: 1.5rem !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, जां ) च सेट करना सुनिश्चत करो %।