गटर

गटर अहां कें कॉलम कें बीच पैडिंग छै, जेकर उपयोग बूटस्ट्रैप ग्रिड सिस्टम मे सामग्री कें प्रतिक्रियाशील रूप सं स्पेस आ संरेखित करय कें लेल कैल जायत छै.

इस पेज पर

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

गटर स्तंभ सामग्री के बीच के अंतराल अछि, क्षैतिज द्वारा बनाओल गेल अछि 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. एहि सँ सभ तत्काल बच्चा स्तंभ सँ नकारात्मक margins .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,
);