कंटेनर

किवें कम्म करदे ने

कंटेनर बूटस्ट्रैप च सारें शा बुनियादी लेआउट तत्व न ते साढ़े डिफ़ॉल्ट ग्रिड सिस्टम दा इस्तेमाल करदे बेल्लै जरूरी न . कंटेनरें दा इस्तेमाल उंदे अंदर सामग्री गी समाहित करने, पैड करने, ते (कदें-कदें) केंद्रत करने लेई कीता जंदा ऐ। जदके कंटेनरें गी नेस्ट कीता जाई सकदा ऐ, तां मते सारे लेआउटें गी नेस्टेड कंटेनर दी लोड़ नेईं ऐ.

बूटस्ट्रैप त्रै बक्ख-बक्ख कंटेनरें कन्नै औंदा ऐ:

• .container, जेह् ड़ा max-widthहर प्रतिक्रियाशील ब्रेकपॉइंट पर इक सेट करदा ऐ
• .container-fluid, जो कि width: 100%हर ब्रेकपॉइंट पर है
• .container-{breakpoint}, जेह् ड़ा width: 100%निर्दिश्ट ब्रेकपॉइंट तगर ऐ

हेठ दित्ती गेदी तालिका च दस्सेआ गेआ ऐ जे हर इक कंटेनर दी max-widthतुलना मूल कन्नै .containerते .container-fluidहर ब्रेकपॉइंट दे पार किस चाल्ली कीती जंदी ऐ।

इन्हें गी एक्शन च दिक्खो ते साढ़े ग्रिड उदाहरण च उंदी तुलना करो .

डिफ़ॉल्ट कंटेनर ऐ

साढ़ा डिफ़ॉल्ट .containerवर्ग इक प्रतिक्रियाशील, स्थिर-चौड़ाई आह् ला कंटेनर ऐ, जिसदा मतलब ऐ max-widthहर ब्रेकपॉइंट पर इसदे बदलाव।

<div class="container">
  <!-- Content here -->
</div>

रिस्पांसिव कंटेनर

प्रतिक्रियाशील कंटेनर तुसेंगी इक वर्ग निर्दिश्ट करने दी अनुमति दिंदे न जेह् ड़ी निर्दिश्ट ब्रेकपॉइंट तगर पुज्जने तकर 100% चौड़ा ऐ , जिसदे बाद अस max-widthउच्च ब्रेकपॉइंटें च हर इक आस्तै s लागू करदे आं . मसाल आस्तै, ब्रेकपॉइंट पर पुज्जने .container-smतकर शुरू करने आस्तै 100% चौड़ा ऐ , जित्थै एह् , , , ते smकन्नै स्केल करग ।mdlgxlxxl

<div class="container-sm">100% wide until small breakpoint</div>
<div class="container-md">100% wide until medium breakpoint</div>
<div class="container-lg">100% wide until large breakpoint</div>
<div class="container-xl">100% wide until extra large breakpoint</div>
<div class="container-xxl">100% wide until extra extra large breakpoint</div>

तरल पदार्थ दे बर्तन

पूर्ण चौड़ाई आह् ले कंटेनर आस्तै इस्तेमाल करो .container-fluid, जेह् ड़ा व्यूपोर्ट दी पूरी चौड़ाई च फैले दा ऐ.

<div class="container-fluid">
  ...
</div>

सस्स

जिऱयां उप्पर दिक्खेआ गेआ ऐ, बूटस्ट्रैप पूर्व-निर्धारित कंटेनर वर्गें दी इक श्रृंखला पैदा करदा ऐ जेह् ड़ी तुसेंगी अपने मर्जी दे लेआउट बनाने च मदद करग. तुस इनें पूर्व-निर्धारित कंटेनर वर्गें गी Sass नक्शे (च पाया गेआ _variables.scss) गी संशोधित करियै अनुकूलित करी सकदे ओ जेह् ड़ा उनेंगी शक्ति दिंदा ऐ:

$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px,
  xxl: 1320px
);

सस्स गी कस्टमाइज करने दे अलावा, तुस साढ़े सस्स मिक्सिन कन्नै अपने कंटेनर बी बनाई सकदे ओ।

// Source mixin
@mixin make-container($padding-x: $container-padding-x) {
  width: 100%;
  padding-right: $padding-x;
  padding-left: $padding-x;
  margin-right: auto;
  margin-left: auto;
}

// Usage
.custom-container {
  @include make-container();
}

साढ़े Sass नक्शे ते चर गी संशोधित करने दे तरीकें बारै होर मती जानकारी ते उदाहरणें आस्तै, कृपा करियै ग्रिड दस्तावेजें दे Sass खंड दा संदर्भ लैओ .