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

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

इस पृष्ठ पर

उदाहरण

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

फ्लेक्सबॉक्स के लिए नया या अपरिचित? पृष्ठभूमि, शब्दावली, दिशानिर्देश और कोड स्निपेट के लिए इस CSS ट्रिक्स फ्लेक्सबॉक्स गाइड को पढ़ें ।

कॉलम

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

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

ग्रिड विकल्प

बूटस्ट्रैप का ग्रिड सिस्टम सभी छह डिफ़ॉल्ट ब्रेकप्वाइंट और आपके द्वारा अनुकूलित किए गए किसी भी ब्रेकप्वाइंट के अनुकूल हो सकता है। छह डिफ़ॉल्ट ग्रिड स्तर इस प्रकार हैं:

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

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

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

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

स्पष्ट क्रमांकित वर्ग जैसे .col-sm-6.

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

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

2 में से 1

2 का 2

1 में से 3

2 में 3

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>

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

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

1 में से 3

3 में से 2 (व्यापक)

3 में से 3

1 में से 3

3 में से 2 (व्यापक)

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

1 में से 3

चर चौड़ाई सामग्री

3 में से 3

1 में से 3

चर चौड़ाई सामग्री

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) पर क्षैतिज हो जाता है।

col-sm-8

col-sm-4

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

मिश्रण और मैच

क्या आप नहीं चाहते कि आपके कॉलम कुछ ग्रिड स्तरों में बस ढेर हो जाएं? आवश्यकतानुसार प्रत्येक स्तर के लिए विभिन्न वर्गों के संयोजन का उपयोग करें। यह सब कैसे काम करता है, इसके बेहतर विचार के लिए नीचे दिया गया उदाहरण देखें।

.col-md-8

.col-6 .col-md-4

.col-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 चर और मानचित्रों का उपयोग करके, पूर्वनिर्धारित ग्रिड कक्षाओं को पूरी तरह से अनुकूलित करना संभव है। स्तरों की संख्या, मीडिया क्वेरी आयाम और कंटेनर की चौड़ाई बदलें—फिर पुन: संकलित करें।

कॉलम और गटर

ग्रिड कॉलम की संख्या 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, या %) में सेट करना सुनिश्चित करें ।