गटर के बा

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

एह पन्ना पर दिहल गइल बा

उ लोग कईसे काम करेला

गटर कॉलम सामग्री के बीच के अंतराल हवे, क्षैतिज द्वारा बनावल जाला padding। हमनी के हर कॉलम पर padding-rightआ सेट करेनी जा , आ सामग्री के संरेखित करे खातिर हर पंक्ति के शुरुआत आ अंत में ओह के ऑफसेट करे खातिर नेगेटिव के इस्तेमाल करेनी जा।padding-leftmargin
गटर 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,
);