स्पेसिंग

बूटस्ट्रैप मे कोनों तत्व कें रूप कें संशोधित करय कें लेल आशुलिपि प्रतिक्रियाशील मार्जिन आ पैडिंग उपयोगिता वर्गक कें एकटा विस्तृत श्रृंखला शामिल छै.

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

आशुलिपि वर्गक कें साथ कोनों तत्व या ओकर पक्षक कें एकटा उपसमूह कें लेल प्रतिक्रियाशील-अनुकूल marginया मान असाइन करूं. paddingव्यक्तिगत गुण, सब गुण, आ ऊर्ध्वाधर आ क्षैतिज गुणक कें समर्थन शामिल छै. कक्षाक कें निर्माण एकटा डिफ़ॉल्ट Sass नक्शा सं कैल जायत छै जे सं ल .25remक 3rem.

संकेतन

स्पेसिंग उपयोगिता जे सब ब्रेकपॉइंट पर लागू होयत छै, सं xsल क xl, ओकरा मे कोनों ब्रेकपॉइंट संक्षिप्त रूप नहि छै. एकरऽ कारण छै कि वू वर्गऽ स॑ min-width: 0आरू ऊपर लागू करलऽ जाय छै, आरू ई तरह स॑ मीडिया क्वेरी स॑ बान्हलऽ नै जाय छै । शेष ब्रेकपॉइंट मे, तथापि, ब्रेकपॉइंट संक्षिप्त रूप अवश्य शामिल अछि ।

कक्षाक कें नामकरण , , , आ कें {property}{sides}-{size}लेल xsआ {property}{sides}-{breakpoint}-{size}कें लेल प्रारूप कें उपयोग करयत छै .smmdlgxl

जतय संपत्ति एकटा अछि :

• m- कक्षाक लेल जे सेट करैत अछिmargin
• p- कक्षाक लेल जे सेट करैत अछिpadding

जहाँ पक्ष एक अछि : १.

• t- कक्षाओं के लिये जो सेट margin-topयाpadding-top
• b- कक्षाओं के लिये जो सेट margin-bottomयाpadding-bottom
• l- कक्षाओं के लिये जो सेट margin-leftयाpadding-left
• r- कक्षाओं के लिये जो सेट margin-rightयाpadding-right
• x- कक्षाक लेल जे दुनू सेट करैत अछि *-leftआ*-right
• y- कक्षाक लेल जे दुनू सेट करैत अछि *-topआ*-bottom
• blank - क्लास के लेल जे तत्व के सब 4 पक्ष पर एकटा marginया सेट करैत अछि |padding

जहाँ आकार एक अछि :

• 0- ओहि वर्गक लेल जे marginवा paddingकेँ सेट कए समाप्त करैत अछि |0
• 1- (डिफ़ॉल्ट रूप स) कक्षा क लेल जे marginया paddingकए सेट करैत अछि$spacer * .25
• 2- (डिफ़ॉल्ट रूप स) कक्षा क लेल जे marginया paddingकए सेट करैत अछि$spacer * .5
• 3- (डिफ़ॉल्ट रूप स) कक्षा क लेल जे marginया paddingकए सेट करैत अछि$spacer
• 4- (डिफ़ॉल्ट रूप स) कक्षा क लेल जे marginया paddingकए सेट करैत अछि$spacer * 1.5
• 5- (डिफ़ॉल्ट रूप स) कक्षा क लेल जे marginया paddingकए सेट करैत अछि$spacer * 3
• auto- कक्षा क लेल जे marginऑटो कए सेट करैत अछि

$spacers(अहाँ Sass मैप चर मे प्रविष्टि जोड़ि कए आओर आकार जोड़ि सकैत छी .)

उदाहरण के लिये

एहि वर्गक किछु प्रतिनिधि उदाहरण प्रस्तुत अछि :

.mt-0 {
  margin-top: 0 !important;
}

.ml-1 {
  margin-left: ($spacer * .25) !important;
}

.px-2 {
  padding-left: ($spacer * .5) !important;
  padding-right: ($spacer * .5) !important;
}

.p-3 {
  padding: $spacer !important;
}

क्षैतिज केन्द्रीकरण

एकरऽ अतिरिक्त, बूटस्ट्रैप म॑ क्षैतिज मार्जिन क॑ सेट करी .mx-autoक॑ निश्चित-चौड़ाई ब्लॉक स्तर सामग्री क॑ क्षैतिज रूप स॑ केंद्रित करै लेली एगो वर्ग भी शामिल छै-अर्थात, सामग्री जेकरा म॑ छै display: blockआरू एक widthसेट छै- auto.

<div class="mx-auto" style="width: 200px;">
  Centered element
</div>

नकारात्मक मार्जिन

CSS मे, marginगुण नकारात्मक मानक कें उपयोग कयर सकय छै ( paddingनहि करय सकय छै). 4.2 के रूप मे, हम उपरोक्त सूचीबद्ध हर गैर-शून्य पूर्णांक आकार (जैसे, 1, 2, 3, 4, 5) के ललए ऋणात्मक मार्जिन उपयोगिताओ ंको जोड़ा है | इ उपयोगिताक ब्रेकपॉइंट कें पार ग्रिड कॉलम गटर कें अनुकूलित करय कें लेल आदर्श छै.

सिंटैक्स लगभग डिफ़ॉल्ट, सकारात्मक मार्जिन उपयोगिता के समान छै, लेकिन nअनुरोधित आकार स॑ पहल॑ के जोड़ै के साथ. एतय एकटा उदाहरण वर्ग अछि जे .mt-1:

.mt-n1 {
  margin-top: -0.25rem !important;
}

mdमाध्यम ( ) ब्रेकपॉइंट आओर ओहि सं ऊपर बूटस्ट्रैप ग्रिड के अनुकूलित करबाक एकटा उदाहरण एतय देल गेल अछि. .colहम पैडिंग के संग बढ़ा देलहुं अछि .px-md-5आ फेर ओहि के प्रतिकार केलहुं अछि जेकर संग .mx-md-n5अभिभावक पर .row.

<div class="row mx-md-n5">
  <div class="col py-3 px-md-5 border bg-light">Custom column padding</div>
  <div class="col py-3 px-md-5 border bg-light">Custom column padding</div>
</div>