गटर
गटर अहां कें कॉलम कें बीच पैडिंग छै, जेकर उपयोग बूटस्ट्रैप ग्रिड सिस्टम मे सामग्री कें प्रतिक्रियाशील रूप सं स्पेस आ संरेखित करय कें लेल कैल जायत छै.
कोना काज करैत छथि
-
गटर स्तंभ सामग्री के बीच के अंतराल अछि, क्षैतिज द्वारा बनाओल गेल अछि
padding
. हम प्रत्येक कॉलम परpadding-right
और सेट करते हैं, और सामग्री को संरेखित करने के लिए प्रत्येक पंक्ति के आरंभ और अंत में कि ऑफसेट करने के लिएpadding-left
नकारात्मक उपयोग करते हैं |margin
-
1.5rem
गटर (24px
) चौड़ा पर शुरू होइत अछि। एहि स हम अपन ग्रिड कए पैडिंग आ मार्जिन स्पेसर स्केल स मिलान क सकैत छी । -
गटर कें प्रतिक्रियाशील रूप सं समायोजित कैल जा सकय छै. क्षैतिज गटर, ऊर्ध्वाधर गटर, आ सब गटर कें संशोधित करय कें लेल ब्रेकपॉइंट-विशिष्ट गटर वर्गक कें उपयोग करूं.
क्षैतिज नाली
.gx-*
वर्गक कें उपयोग क्षैतिज गटर चौड़ाई कें नियंत्रित करय कें लेल कैल जा सकय छै. यदि एकटा मिलान पैडिंग उपयोगिता कें उपयोग करयत, अवांछित ओवरफ्लो सं बचय कें लेल पैघ गटर कें उपयोग सेहो कैल जायत छै त .container
या .container-fluid
माता-पिता कें समायोजित करय कें आवश्यकता भ सकय छै. जेना, निम्नलिखित उदाहरण मे हम पैडिंग केँ एहि सँ बढ़ा देने छी .px-4
:
<div class="container px-4">
<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">
<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">
<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">
<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">
<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
s .row
आ क्षैतिज केँ हटा देल जाइत अछि |padding
एज-टू-एज डिजाइन चाही? अभिभावक के छोड़ि दियौ .container
या .container-fluid
.
व्यवहार मे, एतय ई केहन लगैत अछि। ध्यान दिअ जे अहां एकर उपयोग अन्य सबटा पूर्व परिभाषित ग्रिड वर्गक (स्तंभ चौड़ाई, प्रतिक्रियाशील स्तर, पुनर्क्रमण, आओर बहुत किछु सहित) क संग जारी राखि सकैत छी.
<div class="row g-0">
<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,
);