Source

स्पेसिंग करना

बूटस्ट्रैप च इक तत्व दी शक्ल गी संशोधित करने आस्तै शॉर्टहैंड रिस्पांसिव मार्जिन ते पैडिंग यूटिलिटी क्लासें दी इक विस्तृत श्रृंखला शामल ऐ।

किवें कम्म करदा है

आशुलिपि वर्गें कन्नै इक तत्व जां उसदे पक्षें दे इक उप-समूह गी प्रतिक्रियाशील-अनुकूल marginजां मूल्यें गी असाइन करो। paddingव्यक्तिगत गुणें, सारे गुणें, ते ऊर्ध्वाधर ते क्षैतिज गुणें लेई समर्थन शामल ऐ। क्लासें गी इक डिफ़ॉल्ट सस मैप थमां बनाया जंदा ऐ जेह् .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
रिक्त - उनें वर्गें आस्तै जेह् ड़ियां इक marginजां paddingतत्व दे सारे 4 पास्सें पर सेट करदियां न

जित्थें आकार इक ऐ:

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(तुस सस्स मैप चर च प्रविश्टियां जोड़ियै होर आकार जोड़ सकदे ओ ।)

उदाहरण दे

इनें वर्गें दे किश प्रतिनिधि उदाहरण दित्ते गेदे न:

.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>