गटर
गटर तुंदे स्तंभें दे बिच्च पैडिंग ऐ, जिसदा इस्तेमाल बूटस्ट्रैप ग्रिड सिस्टम च सामग्री गी जवाबदेही कन्नै स्पेस ते संरेखित करने लेई बरतेआ जंदा ऐ।
किवें कम्म करदे ने
-
गटर स्तंभ सामग्री दे बिच्च अंतराल न , क्षैतिज द्वारा बनाई गेदी
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
एस .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,
);