पात्रां

ते कशे काम करतात

कंटेनर हे बूटस्ट्रॅपांतले सगळ्यांत मुळावे मांडावळ घटक आसात आनी आमची मुलभूत ग्रिड प्रणाली वापरतना तांकां जाय पडटात . कंटेनरांचो उपेग आशय आस्पावपाखातीर, पॅड करपाखातीर आनी (केन्ना केन्नाय) तांचेभितरली सामुग्री केंद्रीत करपाखातीर करतात. कंटेनरांक नेस्ट करूं येता, जाल्यार चडशा मांडावळींक नेस्टेड कंटेनराची गरज नासता.

बूटस्ट्रॅप तीन वेगवेगळ्या कंटेनरां वांगडा येता:

• .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, जंय तो md, lg, xl, आनी च्या आदारान स्केल अप जातलो xxl.

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

सास

वयर दाखयल्ले प्रमाणें, तुमकां जाय आशिल्लीं मांडावळी तयार करपाक मदत करपाक बूटस्ट्रॅप पूर्वनिर्धारीत कंटेनर वर्गांची माळ तयार करता. _variables.scssतुमी हे पूर्वनिर्धारीत कंटेनर वर्ग पसंतीचे करूंक शकतात, तांकां शक्त दिवपी Sass नकासो (तांत मेळटा) बदलून :

$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 नकाशे आनी चड-उणें कशे बदलचे हाचे विशीं चड म्हायती आनी उदाहरणां खातीर, उपकार करून Grid दस्तावेजीकरणाचो Sass विभाग पळयात .