मुखेल आशयाचेर वचचें डॉक्स नेव्हिगेशनाचेर वचचें
in English

पात्रां

कंटेनर हो Bootstrap चो एक मुळावो बिल्डिंग ब्लॉक आसा जो दिल्ल्या डिव्हायसा भितर वा व्यूपोर्टा भितर तुमची सामुग्री आसता, पॅड करता आनी संरेखित करता.

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

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

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

  • .container, जें max-widthदर एका प्रतिसाद दिवपी ब्रेकपॉइंटाचेर एक सेट करता
  • .container-fluid, जें width: 100%सगळ्या ब्रेकपॉइंटांचेर आसता
  • .container-{breakpoint}, जें width: 100%निर्दिश्ट केल्ल्या ब्रेकपॉइंट मेरेन आसता

सकयल दिल्लें कोश्टक दरेक कंटेनराची मूळ आनी दर एका ब्रेकपॉइंटाच्या आड कशी max-widthतुळा करता तें दाखयता..container.container-fluid

त्यो कृतींत पळयात आनी आमच्या ग्रिड उदाहरणांत तांची तुळा करात .

अतिरिक्त ल्हान
<576px
ल्हान
≥576px
मध्यम
≥768px आसा
व्हड
≥992px
एक्स-लार्ज
≥1200px
XX- व्हड
≥1400px
.container १००% हें . 540px आसा 720px इतलें आसा 960px आसा 1140px आसा 1320px आसा
.container-sm १००% हें . 540px आसा 720px इतलें आसा 960px आसा 1140px आसा 1320px आसा
.container-md १००% हें . १००% हें . 720px इतलें आसा 960px आसा 1140px आसा 1320px आसा
.container-lg १००% हें . १००% हें . १००% हें . 960px आसा 1140px आसा 1320px आसा
.container-xl १००% हें . १००% हें . १००% हें . १००% हें . 1140px आसा 1320px आसा
.container-xxl १००% हें . १००% हें . १००% हें . १००% हें . १००% हें . 1320px आसा
.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 विभाग पळयात .