कंटेनर

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

कंटेनर बूटस्ट्रैप मे सबस बेसिक लेआउट तत्व छै आ हमर डिफ़ॉल्ट ग्रिड सिस्टम कें उपयोग करय कें समय आवश्यक छै . कंटेनर कें उपयोग सामग्री कें समाहित करय, पैड करय, आ (कखनो-कखनो) ओकरा भीतर केंद्रित करय कें लेल कैल जायत छै. जखन कि कंटेनर कें नेस्ट कैल जा सकय छै, अधिकांश लेआउट कें लेल नेस्टेड कंटेनर कें आवश्यकता नहि होयत छै.

बूटस्ट्रैप तीन अलग-अलग कंटेनर के साथ आबै छै:

• .containermax-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
);

Sass के कस्टमाइज करय के अलावा, अहां हमर Sass mixin सं अपन कंटेनर सेहो बना सकय छी.

// 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 खंड देखू .