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

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

कोना काज करैत अछि

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

फ्लेक्सबॉक्स मे नव छी वा अपरिचित छी? पृष्ठभूमि, शब्दावली, दिशा निर्देश, आरू कोड स्निपेट के लेलऽ ई 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

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

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

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

समान-चौड़ाई बहु-रेखा

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

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

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

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

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

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

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

ग्रिड कें लेल जे छोट सं छोट सं पैघ डिवाइस तइक एक समान छै, .colआ .col-*वर्गक कें उपयोग करूं. जखन अहां कें कोनों विशेष आकार कें कॉलम कें आवश्यकता होयत छै तखन एकटा नंबर वाला वर्ग निर्दिष्ट करूं; अन्यथा, बेझिझक चिपकल रहू .col.

<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

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

मिक्स एंड मैच

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

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

अहां संगे देल गेल 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निचे दिखायल गेल छै. अधिक जानकारी क लेल 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. एहि सँ सभ तत्काल बच्चा स्तंभ सँ नकारात्मक margins .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-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 स॑ अधिक स्तंभ रखलऽ जाय छै, त॑ अतिरिक्त स्तंभऽ के हर समूह, एक इकाई के रूप म॑, एगो नया रेखा प॑ लपेटतै ।

<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 कें साथ पूरा कैल जायत छै, मुदा हर कार्यान्वयन विधि एकर लेखा-जोखा नहि द सकय छै.

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

अहां हमर रिस्पांसिव डिस्प्ले यूटिलिटीज के संग विशिष्ट ब्रेकपॉइंट पर सेहो एहि ब्रेक के लागू क सकय छी .

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

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

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

<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भाई-बहिन कॉलम को एक दूसरे से दूर करने के लिए मजबूर करना |

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

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