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

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

ग्रिड विकल्प

जखन कि बूटस्ट्रैप अधिकांश आकारक कें परिभाषित करय कें लेल 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. अहां कें जरूरत कें प्रत्येक ब्रेकपॉइंट कें लेल कोनों संख्या मे यूनिट-लेस क्लास जोड़ूं आ हर कॉलम कें चौड़ाई समान होयत.

1 के 2

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>

समान-चौड़ाई वाला कॉलम क॑ कई लाइनऽ म॑ तोड़लऽ जाब॑ सकै छै, लेकिन एक सफारी फ्लेक्सबॉक्स बग छेलै जे एकरा बिना स्पष्ट 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>

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

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

3 के 1

३ के २ (व्यापक) २.

3 के 3

3 के 1

३ के २ (व्यापक) २.

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>

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

.w-100एक जहाँ आप चाहते हैं कि कॉलम को एक नई रेखा पर तोड़ने के लिये एक डालकर समान-चौड़ाई वाला कॉलम बनाइए जो कई पंक्तियों पर फैलते हैं | .w-100किछु प्रतिक्रियाशील प्रदर्शन उपयोगिताक संग मिला कए ब्रेक रिस्पांसिव बनाउ .

कर्नल

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

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

बूटस्ट्रैप कें ग्रिड मे जटिल प्रतिक्रियाशील लेआउट कें निर्माण कें लेल पूर्व परिभाषित वर्गक कें पांच स्तर शामिल छै. अतिरिक्त छोट, छोट, मध्यम, पैघ, या अतिरिक्त पैघ डिवाइस पर अपन कॉलम के आकार के अनुकूलित करू जेना कि अहाँ उचित बुझू.

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

ग्रिड कें लेल जे छोट सं छोट सं पैघ डिवाइस तइक एक समान छै, .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>

मिक्स एंड मैच

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

.कोल-12 .कोल-एमडी-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-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>

गटर

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

संरेखण

स्तंभक कें लंबवत आ क्षैतिज रूप सं संरेखित करय कें लेल फ्लेक्सबॉक्स संरेखण उपयोगिताक कें उपयोग करूं.

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

तीन स्तंभ मे सँ एकटा

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

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

.कोल-12 .कोल-एसएम-6 .कोल-एमडी-8

.कोल-6 .कोल-एमडी-4

<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 सं बेसि स्तंभक कें राखल गेल छै, त अतिरिक्त स्तंभक कें प्रत्येक समूह, एकटा इकाई कें रूप मे, एकटा नव रेखा पर लपेटतय.

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

पहिल, मुदा अव्यवस्थित

दोसर, मुदा अंतिम

तेसर, मुदा पहिल

<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बदलै छै । आवश्यकतानुसार इ वर्गक कें संख्याबद्ध वर्गक कें साथ सेहो इंटरमिश्रित कैल जा सकय छै .orderorder: -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

.कोल-एमडी-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, अथवा %) मे सेट करब सुनिश्चित करू .