गटर

गटर तुंदे स्तंभें दे बिच्च पैडिंग ऐ, जिसदा इस्तेमाल बूटस्ट्रैप ग्रिड सिस्टम च सामग्री गी जवाबदेही कन्नै स्पेस ते संरेखित करने लेई बरतेआ जंदा ऐ।

इस पेज पर

किवें कम्म करदे ने

गटर स्तंभ सामग्री दे बिच्च अंतराल न , क्षैतिज द्वारा बनाई गेदी padding. padding-rightअस हर इक स्तंभ पर ते सेट करदे आं , ते सामग्री गी संरेखित करने आस्तै हर पंक्ति दे शुरू ते अंत च उसगी ऑफसेट करने padding-leftआस्तै नकारात्मक दा उपयोग करदे आं ।margin
गटर 1.5rem( 24px) चौड़े पर शुरू होंदे न। इस कन्नै असेंगी अपनी ग्रिड गी पैडिंग ते मार्जिन स्पेसर पैमाने कन्नै मिलान करने दी अनुमति मिलदी ऐ।
गटरें गी जवाबदेही कन्नै समायोजित कीता जाई सकदा ऐ। क्षैतिज गटरें, खड़ी गटरें, ते सारे गटरें गी संशोधित करने आस्तै ब्रेकपॉइंट-विशिष्ट गटर वर्गें दा इस्तेमाल करो।

क्षैतिज नाली

.gx-*वर्गें दा इस्तेमाल क्षैतिज गटर चौड़ाई गी नियंत्रत करने लेई कीता जाई सकदा ऐ। जेकर बड्डे गटरें दा बी इस्तेमाल कीता जंदा ऐ तां जे अनचाहे ओवरफ्लो थमां बचाऽ कीता जाई सकै तां .containerजां .container-fluidमाता-पिता गी समायोजित करने दी लोड़ होग, इक मिलान पैडिंग उपयोगिता दा उपयोग करदे होई। मसाल आस्तै, निम्नलिखित उदाहरन च असें पैडिंग गी इस कन्नै बधाया ऐ .px-4:

कस्टम कॉलम पैडिंग

एचटीएमएल ऐ

<div class="container px-4 text-center">
  <div class="row gx-5">
    <div class="col">
     <div class="p-3 border bg-light">Custom column padding</div>
    </div>
    <div class="col">
      <div class="p-3 border bg-light">Custom column padding</div>
    </div>
  </div>
</div>

इक वैकल्पिक समाधान ऐ कक्षा .rowकन्नै दे चारों-पार इक रैपर जोड़ना :.overflow-hidden

कस्टम कॉलम पैडिंग

एचटीएमएल ऐ

<div class="container overflow-hidden text-center">
  <div class="row gx-5">
    <div class="col">
     <div class="p-3 border bg-light">Custom column padding</div>
    </div>
    <div class="col">
      <div class="p-3 border bg-light">Custom column padding</div>
    </div>
  </div>
</div>

खड़ी गटर

.gy-*क्लासें दा इस्तेमाल इक पंक्ति दे अंदर खड़ी गटर चौड़ाई गी नियंत्रत करने लेई कीता जाई सकदा ऐ जिसलै स्तंभ नमीं रेखाएं गी लपेटदे न। क्षैतिज गटरें दी तर्ज पर, खड़ी गटरें .rowकन्नै इक पृष्ठ दे अंत च थमां हेठ किश ओवरफ्लो होई सकदा ऐ। जेकर एह् होंदा ऐ तां तुस क्लास .rowकन्नै इक रैपर चारों-पार जोड़दे ओ:.overflow-hidden

कस्टम कॉलम पैडिंग

एचटीएमएल ऐ

<div class="container overflow-hidden text-center">
  <div class="row gy-5">
    <div class="col-6">
      <div class="p-3 border bg-light">Custom column padding</div>
    </div>
    <div class="col-6">
      <div class="p-3 border bg-light">Custom column padding</div>
    </div>
    <div class="col-6">
      <div class="p-3 border bg-light">Custom column padding</div>
    </div>
    <div class="col-6">
      <div class="p-3 border bg-light">Custom column padding</div>
    </div>
  </div>
</div>

क्षैतिज & ऊर्ध्वाधर गटर

.g-*.overflow-hiddenक्लासें दा इस्तेमाल क्षैतिज गटर चौड़ाई गी नियंत्रित करने आस्तै कीता जाई सकदा ऐ , निम्नलिखित उदाहरण आस्तै अस इक छोटी गटर चौड़ाई दा इस्तेमाल करदे आं , इसलेई रैपर वर्ग गी जोड़ने दी लोड़ नेईं होग ।

कस्टम कॉलम पैडिंग

एचटीएमएल ऐ

<div class="container text-center">
  <div class="row g-2">
    <div class="col-6">
      <div class="p-3 border bg-light">Custom column padding</div>
    </div>
    <div class="col-6">
      <div class="p-3 border bg-light">Custom column padding</div>
    </div>
    <div class="col-6">
      <div class="p-3 border bg-light">Custom column padding</div>
    </div>
    <div class="col-6">
      <div class="p-3 border bg-light">Custom column padding</div>
    </div>
  </div>
</div>

पंक्ति स्तंभ गटर

गटर क्लासें गी बी पंक्ति स्तंभें च जोड़ेआ जाई सकदा ऐ . निम्नलिखित उदाहरन च, अस प्रतिक्रियाशील पंक्ति स्तंभ ते प्रतिक्रियाशील गटर वर्गें दा इस्तेमाल करदे आं।

पंक्ति स्तंभ

एचटीएमएल ऐ

<div class="container text-center">
  <div class="row row-cols-2 row-cols-lg-5 g-2 g-lg-3">
    <div class="col">
      <div class="p-3 border bg-light">Row column</div>
    </div>
    <div class="col">
      <div class="p-3 border bg-light">Row column</div>
    </div>
    <div class="col">
      <div class="p-3 border bg-light">Row column</div>
    </div>
    <div class="col">
      <div class="p-3 border bg-light">Row column</div>
    </div>
    <div class="col">
      <div class="p-3 border bg-light">Row column</div>
    </div>
    <div class="col">
      <div class="p-3 border bg-light">Row column</div>
    </div>
    <div class="col">
      <div class="p-3 border bg-light">Row column</div>
    </div>
    <div class="col">
      <div class="p-3 border bg-light">Row column</div>
    </div>
    <div class="col">
      <div class="p-3 border bg-light">Row column</div>
    </div>
    <div class="col">
      <div class="p-3 border bg-light">Row column</div>
    </div>
  </div>
</div>

ना गटर

साढ़े पूर्व-निर्धारित ग्रिड वर्गें च स्तंभें दे बिच्च गटरें गी .g-0. इस कन्नै सारे तत्काल बच्चें दे स्तंभें थमां नकारात्मक marginएस .rowते क्षैतिज गी हटाई दित्ता जंदा ऐ।padding

किनारा-टू-एज डिजाइन दी लोड़ ऐ ? माता-पिता गी छोड़ो .containerजां ते ओवरफ्लो गी रोकने आस्तै च .container-fluidजोड़ो ।.mx-0.row

व्यवहार च, इत्थें एह् केह् दिखदा ऐ। ध्यान रक्खो जे तुस इसदा इस्तेमाल होर सारे पूर्व-निर्धारित ग्रिड वर्गें कन्नै जारी रक्खी सकदे ओ (जिंदे च स्तंभ चौड़ाई, प्रतिक्रियाशील स्तर, पुनर्क्रम, ते होर मते शामल न)।

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

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

एचटीएमएल ऐ

<div class="row g-0 text-center">
  <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>

नाली बदल दे

कक्षाएं गी सस्स नक्शे थमां बनाया जंदा $guttersऐ जेह् ड़ा सस्स नक्शे थमां विरासत च हासल ऐ $spacers।

$grid-gutter-width: 1.5rem;
$gutters: (
  0: 0,
  1: $spacer * .25,
  2: $spacer * .5,
  3: $spacer,
  4: $spacer * 1.5,
  5: $spacer * 3,
);