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

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

इस पेज पर

उदाहरण

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

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

स्तंभ

<div class="container">
  <div class="row row-cols-2 row-cols-lg-3">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col-4 col-lg-2">Column</div>
    <div class="col-4 col-lg-2">Column</div>
    <div class="col-4 col-lg-2">Column</div>
    <div class="col-4 col-lg-2">Column</div>
    <div class="col-4 col-lg-2">Column</div>
    <div class="col-4 col-lg-2">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);
  }
}

घोंसला बनाना

To nest your content with the default grid, add a new .row and set of .col-sm-* columns within an existing .col-sm-* column. Nested rows should include a set of columns that add up to 12 or fewer (it is not required that you use all 12 available columns).

Level 1: .col-sm-3

Level 2: .col-8 .col-sm-6

Level 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

When using Bootstrap’s source Sass files, you have the option of using Sass variables and mixins to create custom, semantic, and responsive page layouts. Our predefined grid classes use these same variables and mixins to provide a whole suite of ready-to-use classes for fast responsive layouts.

Variables

Variables and maps determine the number of columns, the gutter width, and the media query point at which to begin floating columns. We use these to generate the predefined grid classes documented above, as well as for the custom mixins listed below.

$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
);

Mixins

Mixins are used in conjunction with the grid variables to generate semantic CSS for individual grid columns.

// 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);

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

Example usage

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 {
  @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);
  }
}

Main content

Secondary content

<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: 1.5rem !default;

Grid tiers

Moving beyond the columns themselves, you may also customize the number of grid tiers. If you wanted just four grid tiers, you’d update the $grid-breakpoints and $container-max-widths to something like this:

$grid-breakpoints: (
  xs: 0,
  sm: 480px,
  md: 768px,
  lg: 1024px
);

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

When making any changes to the Sass variables or maps, you’ll need to save your changes and recompile. Doing so will output a brand new set of predefined grid classes for column widths, offsets, and ordering. Responsive visibility utilities will also be updated to use the custom breakpoints. Make sure to set grid values in px (not rem, em, or %).