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

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

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

आशुलिपि वर्गें कन्नै इक तत्व जां उसदे पक्षें दे इक उप-समूह गी प्रतिक्रियाशील-अनुकूल 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>

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

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 px-md-5"><div class="p-3 border bg-light">Custom column padding</div></div>
  <div class="col px-md-5"><div class="p-3 border bg-light">Custom column padding</div></div>
</div>