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

बारह स्तंभ प्रणाली, पंज डिफ़ॉल्ट प्रतिक्रियाशील स्तरें, 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

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

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

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

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

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

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

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

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

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

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

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

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

बराबर-चौड़ाई बहु-पंक्ति

इक गी सम्मिलित करियै बराबर-चौड़ाई आह् ले स्तंभ बनाओ जेह् ड़े मते सारे पंक्तियें गी स्पैन करदे न .w-100जित्थै तुस स्तंभ गी इक नमीं पंक्ति च तोड़ना चांह् दे ओ। .w-100कुछ प्रतिक्रियाशील प्रदर्शन उपयोगिताएं कन्नै मिलाइयै ब्रेक गी उत्तरदायी बनाओ .

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

प्रतिक्रियाशील कक्षाएं

बूटस्ट्रैप दी ग्रिड च जटिल प्रतिक्रियाशील लेआउट बनाने लेई पूर्व-निर्धारित वर्गें दे पंज स्तर शामल न। अतिरिक्त छोटे, छोटे, मध्यम, बड्डे, जां अतिरिक्त बड्डे उपकरणें पर अपने स्तंभें दे आकार गी अनुकूलित करो जि’यां तुस ठीक लग्गे।

सारे ब्रेकपॉइंट

ग्रिड आस्तै जेह् ड़े डिवाइस दे छोटे थमां बड्डे उपकरणें तगर इक गै न, .colते .col-*वर्गें दा इस्तेमाल करो. जदूं तुसेंगी इक खास आकार दे स्तंभ दी लोड़ होंदी ऐ तां इक नंबर आह् ली वर्ग निर्दिश्ट करो; नेईं ते बेझिझक .col.

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

क्षैतिज करने के लिए ढेर हो गया

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

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

मिक्स एंड मैच करो

तुस नेईं चांह् दे ओ जे तुंदे स्तंभ बस कुसै ग्रिड टियर च ढेर होन? जरूरत मताबक हर इक स्तर आस्तै बक्ख-बक्ख वर्गें दे संयोजन दा उपयोग करो। एह् सब किश किस चाल्ली कम्म करदा ऐ इसदे बेहतर विचार आस्तै हेठ दित्ते गेदे उदाहरन गी दिक्खो।

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

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

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

संरेखण करना

स्तंभें गी खड़ी ते क्षैतिज रूप कन्नै संरेखित करने आस्तै फ्लेक्सबॉक्स संरेखण उपयोगिताएं दा उपयोग करो.

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

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

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

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

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

ना गटर

साढ़े पूर्व-निर्धारित ग्रिड वर्गें च स्तंभें दे बिच्च गटरें गी .no-gutters. इस कन्नै सारे तत्काल बच्चें दे स्तंभें थमां नकारात्मक marginएस .rowते क्षैतिज गी हटाई दित्ता जंदा ऐ।padding

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

किनारा-टू-एज डिजाइन दी लोड़ ऐ ? माता-पिता गी छोड़ो .containerया .container-fluid.

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

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

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

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

स्तंभ लपेटना

जेकर इक पंक्ति दे अंदर 12 शा मते स्तंभ रक्खे गेदे न तां अतिरिक्त स्तंभें दा हर इक समूह, इक इकाई दे रूप च, इक नमीं रेखा पर लपेटग।

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

स्तंभ टूटदा ऐ

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

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

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

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

दुबारा क्रमबद्ध करना

क्लासां मंगवाओ

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

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

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

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

कॉलम ऑफसेट करना

तुस ग्रिड स्तंभें गी दो तरीके कन्नै ऑफसेट करी सकदे ओ : साढ़ी प्रतिक्रियाशील .offset-ग्रिड वर्गें ते साढ़ी मार्जिन उपयोगिताएं . ग्रिड वर्गें दा आकार स्तंभें कन्नै मेल खंदा ऐ जदके मार्जिन त्वरित लेआउट आस्तै मता उपयोगी ऐ जित्थै ऑफसेट दी चौड़ाई चर होंदी ऐ ।

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

.offset-md-*क्लासें दा इस्तेमाल करदे होई स्तंभें गी दाएं पास्से लेई जाओ । एह् वर्ग इक स्तंभ दे बाएं हाशिया गी *स्तंभें कन्नै बधांदे न । मसलन, चार स्तंभें उप्पर .offset-md-4चलदा ऐ ।.col-md-4

<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 class="row">
  <div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
  <div class="col-sm-5 offset-sm-2 col-md-6 offset-md-0">.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0</div>
</div>

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

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

v4 च flexbox च जाने कन्नै, तुस मार्जिन उपयोगिताएं दा इस्तेमाल करी सकदे ओ जि'यां .mr-autoभाई-बहन स्तंभें गी इक दुए थमां दूर करने आस्तै मजबूर करना.

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

घोंसला बनाना

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

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

सस्स मिक्सिन

बूटस्ट्रैप दी स्रोत Sass फाइलें दा इस्तेमाल करदे बेल्लै, तुंदे कोल कस्टम, सिमेंटिक, ते प्रतिक्रियाशील पृष्ठ लेआउट बनाने आस्तै Sass चर ते मिक्सिन दा इस्तेमाल करने दा विकल्प ऐ. साढ़ी पूर्व-निर्धारित ग्रिड वर्गें च तेजी कन्नै प्रतिक्रियाशील लेआउटें आस्तै इस्तेमाल आस्तै तैयार वर्गें दा इक पूरा सूट उपलब्ध करोआने आस्तै इनें गै चर ते मिक्सिन दा उपयोग कीता जंदा ऐ।

चर करने वाले

चर ते नक्शे स्तंभें दी संख्या, गटर दी चौड़ाई, ते मीडिया क्वेरी बिंदु निर्धारत करदे न जित्थै तैह् त स्तंभें गी शुरू करना ऐ। अस इन्हें दा उपयोग उप्पर दस्तावेज कीते गेदे पूर्व-निर्धारित ग्रिड वर्गें गी पैदा करने आस्तै करदे आं , ते कन्नै गै हेठ दित्ते गेदे कस्टम मिक्सिन आस्तै बी ।

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

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

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

मिक्सिन

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

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

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

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

उदाहरण दे प्रयोग

You can modify the variables to your own custom values, or just use the mixins with their default values. Here’s an example of using the default settings to create a two-column layout with a gap between.

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

Customizing the grid

Using our built-in grid Sass variables and maps, it’s possible to completely customize the predefined grid classes. Change the number of tiers, the media query dimensions, and the container widths—then recompile.

Columns and gutters

The number of grid columns can be modified via Sass variables. $grid-columns is used to generate the widths (in percent) of each individual column while $grid-gutter-width sets the width for the column gutters.

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

Grid tiers

स्तंभें थमां गै परे जाइयै, तुस ग्रिड टियरें दी गिनतरी गी बी अनुकूलित करी सकदे ओ। जेकर तुस सिर्फ चार ग्रिड टियर चाह्न्दे ओ तां तुस $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, जां ) च सेट करना सुनिश्चत करो %।