स्पेसिंग

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

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

आशुलिपि वर्गक कें साथ कोनों तत्व या ओकर पक्षक कें एकटा उपसमूह कें लेल प्रतिक्रियाशील-अनुकूल 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>