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

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

इस पेज पर

उदाहरण

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

फ्लेक्सबॉक्स मे नव छी वा अपरिचित छी? पृष्ठभूमि, शब्दावली, दिशा निर्देश, आरू कोड स्निपेट के लेलऽ ई 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) 1।
छोट (sm) 10।
मध्यम (md) 10।
बड़का (एलजी) 10।
अतिरिक्त पैघ (xl) .
अतिरिक्त अतिरिक्त बड़ा (xxl) 1।

जैना की ऊपर कहल गेल छै, इ मे सं प्रत्येक ब्रेकपॉइंट कें अपन कंटेनर, अद्वितीय वर्ग उपसर्ग, आ संशोधक होयत छै. एहि ब्रेकपॉइंटक पार ग्रिड कोना बदलैत अछि से देखू:

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

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

बिना स्पष्ट संख्याबद्ध वर्ग के आसान कॉलम आकार के लेल ब्रेकपॉइंट-विशिष्ट कॉलम वर्ग के उपयोग करू जेना .col-sm-6.

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

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

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>

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

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

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>

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

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

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

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

अहां संगे देल गेल 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);
  }
}

घोंसला बनाना

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

स्तर 1: .col-sm-3

स्तर 2: .col-8 .col-sm-6

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