मुख्य विषयवस्तु में जाएं डॉक्स नेविगेशन पर जाएं
in English

ढेर

शॉर्टहैंड हेल्पर्स जो घटक लेआउट को पहले से कहीं अधिक तेज़ और आसान बनाने के लिए हमारी फ्लेक्सबॉक्स उपयोगिताओं के शीर्ष पर निर्मित होते हैं।

स्टैक बूटस्ट्रैप में जल्दी और आसानी से लेआउट बनाने के लिए कई फ्लेक्सबॉक्स गुणों को लागू करने के लिए एक शॉर्टकट प्रदान करता है। अवधारणा और कार्यान्वयन का सारा श्रेय ओपन सोर्स पाइलॉन प्रोजेक्ट को जाता है ।

सचेत! फ्लेक्सबॉक्स के साथ अंतराल उपयोगिताओं के लिए समर्थन हाल ही में सफारी में जोड़ा गया था, इसलिए अपने इच्छित ब्राउज़र समर्थन को सत्यापित करने पर विचार करें। ग्रिड लेआउट में कोई समस्या नहीं होनी चाहिए। और पढ़ें

खड़ा

.vstackलंबवत लेआउट बनाने के लिए उपयोग करें । स्टैक किए गए आइटम डिफ़ॉल्ट रूप से पूर्ण-चौड़ाई वाले होते हैं। .gap-*वस्तुओं के बीच स्थान जोड़ने के लिए उपयोगिताओं का उपयोग करें ।

पहला आइटम
दूसरा आइटम
तीसरा आइटम
<div class="vstack gap-3">
  <div class="bg-light border">First item</div>
  <div class="bg-light border">Second item</div>
  <div class="bg-light border">Third item</div>
</div>

क्षैतिज

.hstackक्षैतिज लेआउट के लिए उपयोग करें । स्टैक्ड आइटम डिफ़ॉल्ट रूप से लंबवत केंद्रित होते हैं और केवल उनकी आवश्यक चौड़ाई लेते हैं। .gap-*वस्तुओं के बीच स्थान जोड़ने के लिए उपयोगिताओं का उपयोग करें ।

पहला आइटम
दूसरा आइटम
तीसरा आइटम
<div class="hstack gap-3">
  <div class="bg-light border">First item</div>
  <div class="bg-light border">Second item</div>
  <div class="bg-light border">Third item</div>
</div>

क्षैतिज मार्जिन उपयोगिताओं जैसे .ms-autoस्पेसर का उपयोग करना:

पहला आइटम
दूसरा आइटम
तीसरा आइटम
<div class="hstack gap-3">
  <div class="bg-light border">First item</div>
  <div class="bg-light border ms-auto">Second item</div>
  <div class="bg-light border">Third item</div>
</div>

और लंबवत नियमों के साथ :

पहला आइटम
दूसरा आइटम
तीसरा आइटम
<div class="hstack gap-3">
  <div class="bg-light border">First item</div>
  <div class="bg-light border ms-auto">Second item</div>
  <div class="vr"></div>
  <div class="bg-light border">Third item</div>
</div>

उदाहरण

.vstackबटन और अन्य तत्वों को ढेर करने के लिए उपयोग करें :

<div class="vstack gap-2 col-md-5 mx-auto">
  <button type="button" class="btn btn-secondary">Save changes</button>
  <button type="button" class="btn btn-outline-secondary">Cancel</button>
</div>

इसके साथ एक इनलाइन फॉर्म बनाएं .hstack:

<div class="hstack gap-3">
  <input class="form-control me-auto" type="text" placeholder="Add your item here..." aria-label="Add your item here...">
  <button type="button" class="btn btn-secondary">Submit</button>
  <div class="vr"></div>
  <button type="button" class="btn btn-outline-danger">Reset</button>
</div>

सास

.hstack {
  display: flex;
  flex-direction: row;
  align-items: center;
  align-self: stretch;
}

.vstack {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-self: stretch;
}